website: landing page and some polish
https://screenshot.googleplex.com/22m8BsSMxVf.png
https://screenshot.googleplex.com/deYXS3X4mrx.png
https://screenshot.googleplex.com/THrneOaJHJW.png
-Add the landing page that separates Syncbase and Vanadium Core
-Updated Vanadium Core landing page (mostly UI polish based on existing content)
-Increases the width of the page.
-Other small UI polish.
-Updates obsolete content:
-remove device manager concept doc
-remove old syncbase concept doc
-update example apps for Vanadium Core
Change-Id: I7cc09c32f902d4b919da72fdb433d30d89c02deb
diff --git a/browser/index.js b/browser/index.js
index 3c9032c..aa7732d 100644
--- a/browser/index.js
+++ b/browser/index.js
@@ -15,24 +15,26 @@
domready(function() {
var sidebarEl = dom.find('.sidebar');
- ReactDOM.render(Sidebar({
- items: parseSidebarProps(dom.find('.sidebar-data'))
- }), sidebarEl);
+ if (sidebarEl) {
+ ReactDOM.render(Sidebar({
+ items: parseSidebarProps(dom.find('.sidebar-data'))
+ }), sidebarEl);
- // Menu toggle, for small screens.
- var obfuscatorEl = dom.element('div');
- obfuscatorEl.classList.add('mdl-layout__obfuscator');
- dom.find('body').appendChild(obfuscatorEl);
- function showSidebar() {
- sidebarEl.classList.add('is-visible');
- obfuscatorEl.classList.add('is-visible');
+ // Menu toggle, for small screens.
+ var obfuscatorEl = dom.element('div');
+ obfuscatorEl.classList.add('mdl-layout__obfuscator');
+ dom.find('body').appendChild(obfuscatorEl);
+ function showSidebar() {
+ sidebarEl.classList.add('is-visible');
+ obfuscatorEl.classList.add('is-visible');
+ }
+ function hideSidebar() {
+ sidebarEl.classList.remove('is-visible');
+ obfuscatorEl.classList.remove('is-visible');
+ }
+ obfuscatorEl.addEventListener('click', hideSidebar);
+ dom.find('header .icon').addEventListener('click', showSidebar);
}
- function hideSidebar() {
- sidebarEl.classList.remove('is-visible');
- obfuscatorEl.classList.remove('is-visible');
- }
- obfuscatorEl.addEventListener('click', hideSidebar);
- dom.find('header .icon').addEventListener('click', showSidebar);
// Render table of contents if requested and there are headings.
var el = dom.find('.toc');
@@ -55,6 +57,21 @@
require('./clipboard')();
}
+ // Run the scroll listener on landing page only. Other pages have the header
+ // fixed.
+ if (pathname === '/' || pathname === '/index.html') {
+ var body = document.body;
+ function onScroll() {
+ if(body.scrollTop < 15) {
+ body.classList.add('not-scrolled');
+ } else {
+ body.classList.remove('not-scrolled');
+ }
+ }
+ onScroll();
+ document.addEventListener('scroll', onScroll);
+ }
+
// Update img elements to display alt text in a figcaption.
dom.all('main img').forEach(function(img) {
var a = dom.element('a');
diff --git a/content/concepts/device-management.md b/content/concepts/device-management.md
deleted file mode 100644
index b516ded..0000000
--- a/content/concepts/device-management.md
+++ /dev/null
@@ -1,116 +0,0 @@
-= yaml =
-title: Device Management
-sort: 4
-toc: true
-= yaml =
-
-Vanadium targets a broad range of compute devices and environments. Vanadium's device management system securely integrates physical devices and software applications available in the system.
-
-# Devices and applications
-
-A __device__ abstracts a system running Vanadium software, although the device need not be exclusively for Vanadium apps - for example, the system could be running natively installed applications alongside Vanadium applications. Typically, a device is a physical computing device, but a device could also be a virtual machine or a browser environment.
-
-An __application__ is a piece of software built using Vanadium. We use "app" as shorthand for "application", without adopting any of the specific meanings the term "app" may have elsewhere (e.g. in the context of mobile device app stores). Vanadium applications instantiate the Vanadium runtime. Usually, a running instance of a binary corresponds to an application, though applications can be multi-processed, or can be scripts, or can be [Docker][docker] images.
-
-Applications are described by an __application envelope__. The envelope
-contains information needed by the device to install and run the application,
-like the application title, location of its binary or script, and configuration settings.
-
-Devices, as environments for apps, are characterized by their ability to build, install, and run apps. Except in tightly controlled organizations, the landscape of devices is typically diverse. Vanadium introduces the concept of a __profile__ in order to prevent application publishers and device administrators from having to contend with myriad possible device setups.
-
-A profile abstracts the characteristics of a physical device, its operating system, and available libraries. It is essentially a label for a particular configurations of devices, though the level of specificity will depend on the profile author. For example, a label could be as generic as `android` or as specific as `raspberry-ubuntu-14.04-media`. A device with a given profile is expected to be able to install and run applications built for that profile, and heterogeneous devices should be able to usefully support the same profile. Profiles may also be used to match configuration requirements and parameters, security policies or any piece of management information that may need to vary based on the type and configuration of a given device.
-
-A device can be assigned a profile manually, or it can programmatically deduce the set of profiles with which it is compatible. If no known profile matches the device, the device is automatically given a profile that is unique to it.
-
-Devices are matched with apps by an __application repository service__. The matching is based on profiles: the device presents the service with the profiles it supports, and the service returns the envelope for the application that matches at least one of the profiles presented.
-
-Matching apps with devices based on profiles is also how our build system ensures that it provides test coverage without having to support all possible machine configurations. Devices that test a given app can report back with a test status for the profile they support.
-
-Application binaries, scripts, docker images, or related data resources (e.g. images, style sheets) are stored in a __binary repository service__. The binary service allows uploading and downloading arbitrary binary blobs identified by their object name.
-
-# Device manager service
-
-Vanadium provides remote management APIs to manage devices and apps.
-
-Each device runs the Vanadium __device manager service__. The device manager
-allows RPCs to control the device's state and security properties (such as
-ownership and access privileges). The device manager also manages applications
-running on the device.
-
-An __application installation__ is an object corresponding to an application
-envelope that was downloaded and installed by the device. A device can have several
-installations of the same application at any point in time (perhaps at different
-versions of the application). Each running instance of an application
-installation is represented by an __application instance__ object. There can be
-zero or more instances for every application installation. Each application
-instance is provided with its own private local storage.
-
-Each application installation and each application instance is identified by an
-object name implementing the __application service__. This allows operations
-such as installation/uninstallation of applications,
-starting/stopping/restarting of instances, updating application versions, and
-suspension/resumption of execution:
-
- * `Install`/`Uninstall`: install a new application or uninstall the
- application installation.
- * `Instantiate`/`Delete`: create or destroy an instance of an application. Resources such as per-instance storage are allocated upon instantiation and reclaimed upon deletion.
- * `Run`/`Kill`: start or stop the execution of an application instance. Per-instance
- storage persists between runs of the instance.
-
-The __object naming scheme__ is as follows:
- * `<device name>/device`: device manager service for device
- * `<device name>/apps/<app title>/<installation id>`: application service for
- installed application
- * `<device name>/apps/<app title>/<installation id>/<instance id>`: application
- service for an instance of the installed application
-
-For example,
- * `<device name>/apps/google maps/0.Uninstall()`: uninstalls installation 0
- of the Google Maps app
- * `<device name>/apps/google maps/0/5.Kill()`: stops running instance 5 of
- installation 0 of the Google Maps app
-
-Globbing at any level of the name hierarchy reveals the appropriate subtree of
-application installations and instances.
-
-Each application exposes the __app cycle manager service__ in addition to any
-other methods that the application may chose to expose. The app cycle manager
-service allows the device manager process to communicate with each app it runs
-for operations such as cleanly shutting down the app.
-
-# Security and identities
-
-The __security model__ revolves around which principals are allowed to perform
-which management operations, and around what capabilities an app is given on a
-device (see [Security Concepts][vanadium-security] for an overview of
-security primitives).
-
-## Device and application identities
-
-Each device is owned by the identity of the principal who claims it. All
-permissions are initially restricted to the owner, who may update the
-permissions on the administrative and operational methods as needed.
-Management methods for an application installation or instance are initially
-restricted to the same principal that installed or started it, and to the
-administrator(s) of the device.
-
-When a client asks the device manager to start an application instance, the
-client principal must provide the application instance with a blessing which
-becomes the default blessing for the principal of the application instance.
-
-## Application permissions
-
-Applications come signed by a publisher's identity which is verified by the
-device before installing the application.
-
-In the future, it will be possible to give applications permission on the
-device according to the device owner's trust relation with the publisher. For
-example, the owner may trust applications published by "Google Inc." with all
-capabilities, whereas she may trust applications published by "XYZ Games
-Corp." with access only to the screen and speakers. An application can request
-further capabilities as needed when it's running. On receiving requests, the
-user may allow or disallow based on their personal comfort level and/or on the
-perceived value of the app feature requesting the new capability.
-
-[docker]: https://www.docker.com/
-[vanadium-security]: /concepts/security.html
diff --git a/content/concepts/syncbase-overview.md b/content/concepts/syncbase-overview.md
deleted file mode 100644
index 06c1a82..0000000
--- a/content/concepts/syncbase-overview.md
+++ /dev/null
@@ -1,374 +0,0 @@
-= yaml =
-title: Syncbase
-sort: 5
-toc: true
-= yaml =
-
-Syncbase is a storage system for developers that makes it easy to synchronize
-app data between devices. It works even when devices are not connected to the
-Internet.
-
-(The video below describes an app built for web browsers. Syncbase is currently
-focused on Android and iOS, and we have removed browser support. The concepts
-in the video are still valid, however.)
-
-<iframe width="560" height="315" src="https://www.youtube.com/embed/2cHzd8pBYmU" frameborder="0" allowfullscreen></iframe>
-
-# Why use Syncbase?
-
-- Synchronization between one user's devices is trivial to configure; multiple
- users can synchronize specific data too
- - Low latency synchronization enables many apps to use storage for
- asynchronous communication
-- Internet connection not required
- - Local storage still works when not connected to the internet
- - Synchronization protocol is peer-to-peer and works just as well over local
- WiFi or Bluetooth as the internet
-- Conflict resolution system merges data when devices have been working offline
-- Unified storage model handles both structured data and blobs
- - Structured databases are easy to use and support transactions and notifications
- - Blob caching policies work well on resource-limited devices
-- Powerful management tools
- - Leverages the Vanadium namespace and security system
- - Open source reference implementation of Syncbase for developers who want
- tight control over the data
-
-The initial version of Syncbase is ready for testing and evaluation by early
-adopters.
-
-This document presents an overview of the system. It is very light on
-implementation details. Subsequent docs will contain those details.
-
-# Background
-
-There are many storage systems that synchronize data between mobile devices, but
-most such systems are cloud-centric rather than peer-to-peer, and the few that
-are peer-to-peer typically focus on files rather than structured storage. In
-addition, very few systems have the fine-grained access control or powerful,
-configurable conflict resolution we want. In summary, we're trying to solve a
-bunch of problems simultaneously whereas those other systems each solve a subset
-of those problems.
-
-# Data Model
-
-Syncbase holds blob data and structured data. The data is organized
-by the following hierarchy:
-
-- Database: An app is preconfigured to have a single database which may contain
- any number of Collections.
-- Collection: A collection is an ordered set of key-value pairs (rows), where
- keys are strings and values are structured types.
- Collections are the unit of access control and can be grouped together
- for synchronization.
-- Row: Each row contains a single value, and the values in the rows of a
- Collection are heterogeneous. Therefore, developers should denormalize
- their data, grouping related data by giving those rows a common key prefix.
-
-## Blobs
-
-Syncbase has strong support for blobs. Blobs support a
-streaming upload/download API rather than the all-at-once operations of the
-structured data. Syncbase understands references to blobs in the structured
-data, making it possible to implement automatic caching and garbage collection
-of the blobs. Blob references implicitly grant access to blobs in a manner
-similar to a capability (see [blob references](#references)).
-
-## Batches
-
-A batch is a group of read and write operations that are logically related. When
-an app uses Syncbase without synchronization, a batch is equivalent to an ACID
-transaction.
-
-- Atomic: All writes that are part of the batch are committed together.
-- Consistent: Any batches started in the future necessarily see the effects of
- batches committed in the past.
-- Isolated: The concurrent execution of batches results in a state that would be
- equivalent to the batches executing serially in some order.
-- Durable: Once a batch has been committed, it will remain committed in the face
- of power loss or crashes.
-
-When an app uses Syncbase with synchronization, a batch no longer provides ACID
-semantics. Syncbase is a loosely coupled, decentralized, distributed storage
-system, so the guarantees of batches are appropriate for that environment.
-
-- Atomic: All read and write operations that are part of the batch are
- synchronized as an atomic unit. However, a [conflict
- resolver](#resolving-conflicts) may merge two batches by taking part of one
- batch and another part of the other batch.
-- Consistent: Consistency is impossible to provide when devices are allowed to
- work offline. A user could perform an operation on one device and then attempt
- to perform an operation on a second device before the two devices have synced
- with each other.
-- Isolated: Conflict resolvers could violate isolation guarantees by improperly
- merging two batches.
-- Durable: While batches are durable in the common case, there are two
- exceptions:
- - The batch is committed on a device while partitioned from other devices. The
- device never syncs with other devices (e.g. dropped in the river).
- - A poorly written conflict resolver erroneously discards the conflicting
- batch rather than merging it.
-
-While the edge cases prevent us from claiming ACID semantics, we believe that
-the behavior above strikes a good balance between implementable semantics and
-useful behavior for the developer and user.
-
-Batches are not limited to the data within a Collection. If a batch contains
-data from multiple Collections, peers will receive only the parts of the batch
-they are allowed to see.
-
-## Access Control
-
-Syncbase enables collaboration between multiple users, so access control is an
-important feature. Syncbase uses the [Vanadium security model]
-for identification and authentication.
-
-Each Collection in a database has its own ACL specifying who can access and modify
-the rows in that Collection. This ACL is synced along with the data itself.
-'Admin' access grants the client permission to change the ACL. 'Write' access
-allows the client to insert and update rows in the Collection. 'Read'
-represents a read-only privilege. These ACLs are enforced by the local
-Syncbase as well as by peer Syncbases during the sync protocol.
-
-Using a TODO list app as an example, each list would live in its own Collection.
-This allows the user to share a grocery list with a spouse and a party planning
-list with a friend. Syncbase synchronizes the two lists independently, yet
-the two lists show up in the same database, making it easy to display them in
-an "all my lists" UI.
-
-## Blob ACLs
-
-See [blob references](#references).
-
-# Synchronization
-
-The sync protocol is peer-to-peer whereas most other sync systems (e.g.
-Firebase) require a centralized server. We believe that despite internet
-connectivity becoming more and more prevalent, there will always be times when
-an internet connection is not available. You should be able to sync with your
-peer, with very low latency, when you are physically close. For example, you
-shouldn't need an internet connection to set the temperature on your thermostat.
-Syncbase uses the cloud as another, very durable peer, but the cloud is not
-required for any two peers to interact. Because the cloud is not in the critical
-path for synchronization, apps can use Syncbase as for asynchronous, relatively
-low latency communication.
-
-Peer-to-peer sync introduces problems not present in client-server sync:
-
-- Sub-groups of devices can collaborate independently, leading to substantial
- data conflicts
-- Malicious peers can perform man-in-the-middle attacks. The system should help
- prevent them.
-
-We define a _syncgroup_ as a list of Collections that are synchronized within
-a set of devices. There can be multiple syncgroups for a single Collection,
-making it possible for a single device to bridge between otherwise disjoint
-groups of devices.
-
-## Arranging data for sync
-
-Continuing with our TODO list example, there would be a Collection for each
-list. There might also be a Collection to store the user's preferences.
-
- Collection for preferences
- preferences -> Preferences
- last-viewed -> String // The ID of the last viewed TODO list.
-
- Collection for list1
- metadata -> List
- entries/<uuid> -> Entry
- entries/<uuid> -> Entry
-
- Collection for list2
- metadata -> List
- entries/<uuid> -> Entry
- entries/<uuid> -> Entry
-
-The app could then create three syncgroups:
-
-* Preferences Collection: Synced across the user's devices. Private to that user.
-* list1 Collection: Synced across the user's devices as well as Alice and Bob's
- devices.
-* list2 Collection: Synced across the user's devices as well as Alice and Carol's
- devices.
-
-Collections created by all users live in the same namespace. To avoid
-collisions, the system automatically prepends the user's identity (blessing)
-to the Collection ID. The developer still needs to think about collisions,
-however. The user might use one device while offline and then switch to
-another device while still offline. When those two devices sync with each
-other, should the Collections merge or stay separate? If the developer wants
-them to stay separate, the Collection IDs should include a UUID. If the
-developer wants them to merge, they should use a predictable name (e.g.
-"preferences").
-
-It is not possible to sync a subset of a Collection differently than the whole
-Collection. The typical solution to this problem is to pull that subset of data
-into its own Collection and leave a reference/pointer in the original Collection.
-
-## ACLs
-
-The sync protocol respects the ACLs on the data. If a peer has read-only
-access to a row, it can still propagate changes from peers that do have write
-access to that row. To prevent this read-only peer from performing a man-in-
-the-middle attack, Syncbase will sign the mutations on behalf of the writer.
-The receivers automatically verify the signatures.
-
-## Example Apps
-
-We [examined 15+ apps in detail](/designdocs/syncbase-examples.html)
-to understand what granularity of access control and syncing was appropriate.
-For some apps like a news reader or a brokerage, everything is single user, so
-syncing all of the data in the local database is appropriate. For apps like
-turn-based games or Nest, there are islands of data (e.g. one instance of a
-game is totally separate from another, one house is totally separate from
-another), so grouping the data into syncgroups is easy. The remaining apps
-were more complicated.
-
-For productivity apps like Todos or Docs, it might make sense to have folders
-and subfolders. The user might want to share a root folder, a subfolder, or
-maybe even a single document nested deep in the folder structure. Assuming that
-the keys map to the folder structure, what happens when another user "mounts"
-that folder or document into his own database? Do the keys stay the same or are
-they rewritten so the folder or document is at the top level of the database.
-For example, if "folder2" below is synced, does the peer see "folder1/folder2"
-or just "folder2"?
-
- folder1
- folder1/doc1
- folder1/folder2
- folder1/folder2/doc2
-
-We explored this topic in great detail, building a FileManager app in the process.
-We concluded that if a developer wishes to share a subfolder differently than the
-parent folder, the developer should move the subfolder to its own Collection and
-leave a reference in the original Collection.
-
-## Which devices?
-
-Our primary goal is to make it simple to sync data between a single user's
-devices. Our secondary goal is to synchronize data between multiple users'
-devices. For both of these, we use the ACL Group Server to represent this list
-of devices.
-
-## Resolving Conflicts
-
-The majority of apps would benefit greatly from simple, automatic conflict
-resolution policies (e.g. last-one-wins, min, max), some apps would benefit
-from more sophisticated operational transforms (OT) (e.g. lists, strings) or
-Conflict-free Replicated Data Types (CRDT), while a small number of apps have
-policies best encoded in the app itself. We should strive to make the simple,
-automatic conflict resolution policies as convenient as possible even if it
-comes at the expense of making other conflict resolution policies more
-difficult to use. OT policies or datatypes such as CollaborativeString and
-CollaborativeMap supported by the
-[Google Realtime API](https://developers.google.com/drive/realtime/reference/)
-are helpful but not sufficient for all apps. Finally, some apps have such unique
-policies that attempting to encode them in some "conflict resolution language" would be
-counter-productive. For these apps, we will provide them with an API that is at a
-low enough level that they can do whatever they want in application code. We
-believe that API should provide access to a tuple of (local version, peer
-version, common ancestor version). This information is stored in Syncbase,
-but we have not yet exposed this API to applications.
-
-## Pluggable Sync
-
-Syncbase provides an escape hatch for apps that do not fit entirely into the
-storage and synchronization model. For example, some apps have existing,
-canonical data in an Oracle or MySQL database. Other apps need to
-broadcast identical data to many users (e.g. DVR program guide). For these
-reasons, Syncbase should make it easy to plug custom code into the sync protocol.
-
-*Lots of details TBD at this point. The need for this feature is clear, but we
-need to look at the detailed requirements.*
-
-## Blobs
-
-The synchronization policy for blobs is different than the policy for structured
-data. All structured data in the syncgroup is synchronized to all devices in the
-syncgroup. However, a single device might not have enough storage space to hold
-all blobs in the syncgroup, or copying a blob might be undesirable over a cell
-network. As a result, there might be a reference from structured storage to a
-blob that is not present on the local device. Apps need to function even when
-some blobs are not present.
-
-### Versions
-
-A blob is immutable once created, so blobs are not versioned. The blob API
-allows the app to efficiently create a new blob based on the content of another
-blob (e.g. edit the ID3 tags of an MP3). The new blob must be referenced by an
-entry in the structured data so that other devices learn of the new blob.
-
-### References
-
-The structured data contains references to the blobs by storing a BlobRef in a
-field. There is an API for apps to specify per-device caching policies so that
-not all blobs need to be on all devices. It is the responsibility of Syncbase to
-watch for BlobRefs in the structured storage and cache the right blobs on each
-device.
-
-The ACL protecting the BlobRef in structured storage acts as an implicit ACL
-for the blob itself. The ACL protects the BlobRef, but once the BlobRef is
-accessible, it acts as a capability. Any app instance possessing the BlobRef
-can access the blob. A BlobRef can be copied into another row, collection, or
-database. However, the BlobRef only works on the Syncbase from which it came
-(i.e. sending a BlobRef over RPC to another device is not useful).
-
-### Durability
-
-Syncbase ensures that not all peers will simultaneously evict a blob because
-that would result in data loss. The sync protocol keeps track of which peers
-have which blobs, and certain peers can be marked as more durable than others.
-For example, a Cloud peer could have effectively unlimited storage space and
-never need to evict blobs. When an ordinary peer sees that the blob has made
-it to a durable peer, the ordinary peer is free to evict the blob. Note that
-it is possible for multiple peers to be durable.
-
-To permanently delete a blob, all references to the blob must be deleted. The
-durable peer holding the blob can detect when the other peers have deleted their
-references. Once a peer has deleted all references, it can not fabricate a new
-reference to the blob. The durable peer can then look at the history of the
-structured data to detect when all peers have deleted their references and the
-blob itself can be safely deleted.
-
-# Data Encryption
-
-*It is important that the data be encrypted at rest. We should also figure out
-if we can have peers that replicate the data but are not allowed to see the
-contents. Lots of details TBD.*
-
-# Multiple Implementations
-
-Syncbase needs to work on a variety of devices and configurations. Not only does
-it need to work well on phones, tablets, desktops, and other networked devices,
-app developers also need a multi-tenant deployment they can provide to their
-users for durability and ease of use. We offer the following implementations:
-
-## Mobile
-
-There is an implementation that works well on mobile devices. It is aware
-of performance constraints of mobile flash devices. It is also aware of
-battery and network usage. This implementation does not need to scale to
-huge sizes nor to high throughput.
-
-## Cloud
-
-This version of Syncbase acts as a cloud peer.
-
-- Completely open source. It is important to the success of the project that
- developers are not locked in to a Google service. They need an escape hatch.
-- It may or may not have an instance of the app available to resolve conflicts.
-- It needs to function as a multi-tenant service that app developers can run for
- their users.
-- It is simple for an app developer or advanced user to deploy (e.g. VM
- image with everything required).
-- The first version does not scale beyond a single machine. This
- implementation is mostly the same as the mobile implementation and is suitable
- for prototyping. A subsequent version would probably use MySQL as the
- underlying storage layer and could likely handle tens of thousands of users.
- Further scale would be up to the developer or open source community.
-
-One idea that we need to explore further is for the cloud peer to be sync-only.
-It would not support Put/Get/Delete/Scan. By removing that functionality,
-we could potentially increase scalability and simplify deployment.
-
-[Vanadium security model]: /concepts/security.html
diff --git a/content/core.md b/content/core.md
new file mode 100644
index 0000000..de35e19
--- /dev/null
+++ b/content/core.md
@@ -0,0 +1,51 @@
+= yaml =
+title:
+fullTitle: Vanadium Core
+= yaml =
+
+Vanadium Core is the discovery, RPC, and security layer underlying Syncbase.
+It enables building secure, distributed applications that can run anywhere.
+It provides:
+<div class="intro-detail intro-detail-security">
+ <p>
+ **Complete security model**<br>
+ Vanadium's security model is based on public-key cryptography, that supports
+ fine-grained permissions and delegation. The combination of traditional ACLs
+ and "blessings with caveats" supports a broad set of practical requirements.
+ <p>[Learn more about Security](/concepts/security.html)</p>
+ </p>
+</div>
+<div class="intro-detail intro-detail-codebase">
+ <p>
+ **Symmetrically authenticated and encrypted RPC**<br>
+ Vanadium Core provides symmetrically authenticated and encrypted RPC, with
+ support for bi-directional
+ messaging, streaming and proxying, that works on a variety of network
+ protocols, including TCP and Bluetooth. The result is a secure communications
+ infrastructure that can be used for large-scale datacenter applications as
+ well as for smaller-scale enterprise and consumer applications, including
+ those needing to cross NAT boundaries.
+ All data on the wire is encoded using Vanadium Object Marshalling (VOM),
+ which is a performant, self-describing encoding format.
+ <p>[Learn more about RPC System](/concepts/rpc.html)</p>
+ </p>
+</div>
+<div class="intro-detail intro-detail-discovery">
+ <p>
+ **Distributed naming and discovery**<br>
+ Vanadium provides a global naming service that offers the convenience of
+ urls but allows for federation and multi-level resolution. The
+ 'programming model' consists of nothing more than invoking methods on
+ names, subject to security checks. Vanadium also provides a discovery API
+ for advertising and scanning for services over a variety of protocols,
+ including BLE and mDNS (Bonjour).
+ <p>[Learn more about Naming](/concepts/naming.html)</p>
+ </p>
+</div>
+
+# Ready to get started?
+
+<p>Vanadium is an open source effort, and we welcome your contributions.
+Get started now by exploring the tutorials.</p>
+<a href="/tutorials/hello-world.html" class="button-passive">
+Start the tutorial</a>
\ No newline at end of file
diff --git a/content/designdocs/syncbase-examples.md b/content/designdocs/syncbase-examples.md
deleted file mode 100644
index c2b50ca..0000000
--- a/content/designdocs/syncbase-examples.md
+++ /dev/null
@@ -1,23 +0,0 @@
-= yaml =
-title: Syncbase Example Apps
-toc: true
-= yaml =
-
-# Overview
-
-To validate the Syncbase data model, we wrote design docs for a wide variety
-of apps. These docs focused on the interactions with Syncbase and the schema
-they would use for storage and synchronization. There are many variations on
-the features in the apps and many ways to implement those features, so these
-docs are not intended to represent the only way to build these apps. Instead,
-these docs are intended to provide inspiration while designing your own apps.
-
-## Coffee Catalog
-
-Allows a user to browse and place orders from a catalog containing coffee and
-related paraphernalia.
-
-[Design Doc](/syncbase/designdocs/coffee-catalog.html)
-
-
-# TODO(kash): Convert the other 15+ docs to markdown
diff --git a/content/example-apps.md b/content/example-apps.md
index de6b70d..e63a5d4 100644
--- a/content/example-apps.md
+++ b/content/example-apps.md
@@ -3,48 +3,31 @@
toc: true
= yaml =
-# Vanadium Chat
+# Physical Lock
-* Repo: https://github.com/vanadium/chat
-* Issues: https://github.com/vanadium/chat/issues
+* Repo: https://github.com/vanadium/physical-lock
-[Vanadium Chat][chat] is a peer-to-peer chat application that demonstrates
-common usage patterns for the Vanadium libraries.
+[Physical Lock][lock] defines the software for building a secure physical lock
+using the Vanadium stack, along with a commmand-line tool for interacting with
+the lock.
+The software runs on a Raspberry Pi and interacts with the locks's switches and
+sensors using GPIO. It runs a Vanadium RPC service that allows clients to send
+lock and unlock requests.
-There are currently two clients: a [web client] and a Go-based shell client.
+Key distinguishing aspects:
+* *Decentralized:* There is no single authority on all the locks, no cloud server
+that controls access to all locks from a particular manufacturer. All secrets and
+credentials pertaining to a particular lock are solely held by the lock and its
+clients. Huge compute farms run by hackers all over the world have no single
+point of attack that can compromise the security of multiple locks.
+* *No Internet Connectivity Required:* The lock does not require internet
+connectivity to function. When you’re right in front of the device, you can
+communicate with it directly without going through the cloud or a third-party
+service.
+* *Audited:* The lock can keep track of who opened the door, when and how they
+got access.
-For more information, see the [README][chat-readme].
+For more information, see the [README][lock-readme].
-# PipeToBrowser
-
-* Repo: https://github.com/vanadium/pipe2browser
-* Issues: https://github.com/vanadium/pipe2browser/issues
-
-[PipeToBrowser][p2b] (P2B) is a Vanadium application that allows users to pipe
-anything from a shell to the browser using regular shell piping functionality.
-Piped data is displayed in a formatted way by a graphical viewer. Users can also
-send or redirect pipes to other users of P2B.
-
-For example, one can pipe a text log file and view it in a sortable, filterable,
-paged DataGrid in the browser:
-
- $ tail -n 100 logfile.txt | p2b google/p2b/myInstance/vlog
-
-As another example, one can pipe an image to someone else's browser:
-
- $ cat cat.png | p2b google/p2b/myFriendsInstance/image
-
-P2B supports several built-in plugins such as console, image viewer, log viewer,
-git status viewer, and `dev/null`. Users can create their own plugins as well.
-
-For more information, see the [README][p2b-readme] as well as the help page
-inside a running instance of the P2B application.
-
-[todos]: https://github.com/vanadium/todos
-[syncbase]: /concepts/syncbase-overview.html
-[todos-readme]: https://github.com/vanadium/todos/blob/master/README.md
-[chat]: https://github.com/vanadium/chat
-[web client]: https://chat.v.io
-[chat-readme]: https://github.com/vanadium/chat/blob/master/README.md
-[p2b]: https://github.com/vanadium/pipe2browser
-[p2b-readme]: https://github.com/vanadium/pipe2browser/blob/master/README.md
+[lock]: https://github.com/vanadium/physical-lock
+[lock-readme]: https://github.com/vanadium/physical-lock/blob/master/README.md
diff --git a/content/index.md b/content/index.md
index 15a2799..5d94985 100644
--- a/content/index.md
+++ b/content/index.md
@@ -1,43 +1,47 @@
= yaml =
-title:
-fullTitle: Vanadium
+title: Home
+layout: home
+toc: false
= yaml =
-Vanadium is an [open-source](https://github.com/vanadium) framework designed to
-make it much easier to develop secure, distributed applications that can run
-anywhere. It provides:
-+ a complete security model, based on public-key cryptography, that supports
- fine-grained permissions and delegation. The combination of traditional ACLs
- and "blessings with caveats" supports a broad set of practical requirements.
-+ symmetrically authenticated and encrypted RPC, with support for bi-directional
- messaging, streaming and proxying, that works on a variety of network
- protocols, including TCP and Bluetooth. The result is a secure communications
- infrastructure that can be used for large-scale datacenter applications as
- well as for smaller-scale enterprise and consumer applications, including
- those needing to cross NAT boundaries.
-+ a performant, self-describing encoding format, usable from many programming
- languages and platforms (including Go and Java/Android, with more
- on the way).
-+ a global naming service that offers the convenience of urls but allows for
- federation and multi-level resolution. The 'programming model' consists of
- nothing more than invoking methods on names, subject to security checks.
-+ a discovery API for advertising and scanning for services over a variety of
- protocols, including BLE and mDNS (Bonjour).
-+ the ability to use multiple global and/or local identity providers (e.g.
- Google, Facebook, Microsoft Exchange, PAM, etc.). We currently provide an
- OAuth2-based implementation, but others would work just as well.
-+ a storage service, Syncbase, that can be run on all devices, large or small,
- and offers synchronized peer-to-peer storage. Syncbase offers:
- - a structured store that can be queried using a SQL-like query language
- - a blob store that synchronizes content across all devices
- - the ability to group data into 'synchronization groups' to control what's
- synced with who
- - fine-grained access control
- - peer-to-peer synchronization with configurable conflict resolution
- - offline operation
-
-The Vanadium APIs are relatively stable and have been subjected to extensive
-usability testing. In addition, we've taken care to cleanly separate the APIs
-([v.io/v23]) from their implementations.
-
-[v.io/v23]: https://godoc.org/v.io/v23/
+<section class="intro">
+ <div class="section-container">
+ <h1>
+ Create mobile and distributed applications that work even without an Internet connection.
+ </h1>
+ </div>
+</section>
+<section class="mobile">
+ <div class="section-container">
+ <h2>
+ Get Started with Syncbase
+ </h2>
+ <h3>
+ Syncbase is a mobile database that supports peer-to-peer synchronization. It works just as well when devices are not connected to the Internet.
+ </h3>
+ <div class="buttons">
+ <a href="/syncbase" class="button-secondary build-android">
+ Develop for Android
+ </a>
+ <a class="button-disabled build-ios">
+ Develop for iOS (coming soon)
+ </a>
+ </div>
+ </div>
+</section>
+<section class="core">
+ <div class="section-container">
+ <h2>
+ Build Distributed Apps with Vanadium Core
+ </h2>
+ <h3>
+ Vanadium Core is the discovery, RPC, and security layer underlying Syncbase.
+ It enables building secure, distributed applications that can run anywhere.
+ </h3>
+ <div class="buttons">
+ <a href="/core.html" class="button-secondary build-core">
+ Develop in Go
+ </a>
+ </div>
+ </div>
+</section>
\ No newline at end of file
diff --git a/content/syncbase/first-app.md b/content/syncbase/first-app.md
index 575b53b..0d99fb3 100644
--- a/content/syncbase/first-app.md
+++ b/content/syncbase/first-app.md
@@ -77,8 +77,8 @@
User currUser = Users.loginWithDefaultAccount();
DatabaseOptions dbOpt = new DatabaseOptions();
- dbOpt.cloudSyncbaseAddress = '<Your Cloud Syncbase Address>'
- dbOpt.cloudSyncbaseBlessing = '<Your Cloud Syncbase Blessing>'
+ dbOpt.cloudSyncbaseAddress = "<Your Cloud Syncbase Address>"
+ dbOpt.cloudSyncbaseBlessing = "<Your Cloud Syncbase Blessing>"
Database db = Syncbase.getDatabase();
@@ -187,8 +187,8 @@
User currUser = Users.loginWithDefaultAccount();
DatabaseOptions dbOpt = new DatabaseOptions();
- dbOpt.cloudSyncbaseAddress = '<Your Cloud Syncbase Address>'
- dbOpt.cloudSyncbaseBlessing = '<Your Cloud Syncbase Blessing>'
+ dbOpt.cloudSyncbaseAddress = "<Your Cloud Syncbase Address>"
+ dbOpt.cloudSyncbaseBlessing = "<Your Cloud Syncbase Blessing>"
Database db = Syncbase.getDatabase();
@@ -262,7 +262,9 @@
## Please note
Internet connectivity is required the first time the app is run to authenticate
the user and generate an offline auth certificate.
-Subsequence runs do not require Internet connectivity.
+Subsequence runs do not require Internet connectivity for 24 hours. (Auth protocol
+starts trying to refresh the certificate after 12 hours and it would expire in
+24 hours if all tries are unsuccessful).
{{/ helpers.info }}
After running the application on 2 or more devices with Internet connectivity,
diff --git a/content/syncbase/guides/data-model.md b/content/syncbase/guides/data-model.md
index 97ed237..5287909 100644
--- a/content/syncbase/guides/data-model.md
+++ b/content/syncbase/guides/data-model.md
@@ -28,8 +28,8 @@
```
DatabaseOptions dbOpt = new DatabaseOptions();
-dbOpt.cloudSyncbaseAddress = '<Your Cloud Syncbase Address>';
-dbOpt.cloudSyncbaseBlessing = '<Your Cloud Syncbase Blessing>';
+dbOpt.cloudSyncbaseAddress = "<Your Cloud Syncbase Address>";
+dbOpt.cloudSyncbaseBlessing = "<Your Cloud Syncbase Blessing>";
Database db = Syncbase.getDatabase();
```
diff --git a/content/syncbase/index.md b/content/syncbase/index.md
index 71ac650..40bc2e4 100644
--- a/content/syncbase/index.md
+++ b/content/syncbase/index.md
@@ -4,14 +4,13 @@
toc: false
= yaml =
-Syncbase is a storage system for developers that makes it easy to synchronize
-app data between devices. It works even when devices are not connected to the
-Internet. Syncbase runs on both Android and iOS.
+Syncbase is a mobile database that supports peer-to-peer synchronization.
+It works just as well when devices are not connected to the Internet.
+Syncbase runs on both Android and iOS (coming soon).
-<iframe width="560" height="315" src="https://www.youtube.com/embed/2cHzd8pBYmU" frameborder="0" allowfullscreen></iframe>
+<div class='embed-container'><iframe src='https://www.youtube.com/embed/2cHzd8pBYmU' frameborder='0' allowfullscreen></iframe></div>
-<figcaption>Syncbase's easy-to-use API and peer-to-peer synchronization make
-developing offline-first mobile apps a breeze.</figcaption>
+<figcaption>Syncbase Overview</figcaption>
# Why use Syncbase?
diff --git a/content/syncbase/quickstart.md b/content/syncbase/quickstart.md
index 9a03bdb..3024537 100644
--- a/content/syncbase/quickstart.md
+++ b/content/syncbase/quickstart.md
@@ -80,8 +80,8 @@
super.onCreate(savedInstanceState);
{{/ helpers.codedim}}
Syncbase.DatabaseOptions options = new Syncbase.DatabaseOptions();
- // dbOpt.cloudSyncbaseAddress = '<Your Cloud Syncbase Address>';
- // dbOpt.cloudSyncbaseBlessing = '<Your Cloud Syncbase Blessing>';
+ // dbOpt.cloudSyncbaseAddress = "<Your Cloud Syncbase Address>";
+ // dbOpt.cloudSyncbaseBlessing = "<Your Cloud Syncbase Blessing>";
Syncbase.database(new Syncbase.DatabaseCallback() {
@Override
diff --git a/content/tutorials/syncbase/syncql-tutorial.md b/content/tutorials/syncbase/syncql-tutorial.md
deleted file mode 100644
index 54dfedd..0000000
--- a/content/tutorials/syncbase/syncql-tutorial.md
+++ /dev/null
@@ -1,1108 +0,0 @@
-= yaml =
-title: SyncQL Tutorial
-layout: tutorial
-wherein: you learn about the Syncbase query language.
-toc: true
-= yaml =
-
-# Overview
-
-Syncbase is Vanadium's key/value store and provides persistent data with fine grained access and synchronization across Syncbase instances.
-
-SyncQL is a SQL-like query language for Syncbase.
-
-This tutorial walks one through the setup of a sample database and then dives into teaching syncQL by running command-line queries.
-
-# How to Take this Tutorial
-
-This tutorial assumes one has a working Vanadium development environment.
-
-All of the steps are independent, so one can pick up anywhere he wishes. Just perform the [setup](#setup) steps to start/restart and the [teardown](#teardown) steps to finish/take a break.
-
-It's OK to cut and paste the [setup](#setup) and [teardown](#teardown) steps, but please consider typing the queries rather than cutting and pasting them. Actually typing the queries (and making mistakes and correcting them) is a great way to learn.
-
-# Setup
-
-This set of step-by-step instructions assumes one has a working Vanadium development environment, which includes having the `JIRI_ROOT` environment variable set.
-
-**[NOTE]** For the Vanadium and/or Syncbase literate, it's OK to skip and/or modify some of these steps.
-
-1. Build and install the necessary executables (principal program, mount table daemon, Syncbase daemon, Syncbase command-line program):
-
- jiri go install v.io/x/ref/cmd/principal v.io/x/ref/services/mounttable/mounttabled v.io/x/ref/services/syncbase/syncbased v.io/x/ref/cmd/sb
-
-2. Create a principal using a self-signed blessing:
-
- $JIRI_ROOT/release/go/bin/principal create /tmp/me $($JIRI_ROOT/release/go/bin/principal blessself)
-
-3. Start the mounttable and Syncbase daemons (start in foreground to enter root password, then send to background):
-
- $JIRI_ROOT/release/go/bin/mounttabled -v23.tcp.address=:8101
- <ctrl-z>
- bg
- $JIRI_ROOT/release/go/bin/syncbased -name '/:8101/syncbase' -v23.credentials=/tmp/me -root-dir=/tmp/sbroot
- <ctrl-z>
- bg
-
-4. Start `sb` (Syncbase command-line program):
-
- $JIRI_ROOT/release/go/bin/sb sh -create-missing -v23.credentials=/tmp/me demoapp demodb
-
-5. Create a demo database:
-
- ? make-demo;
-
-**[NOTE]** When you finish the tutorial (or want to take a break), execute the [teardown](#teardown) steps below to clean up!
-
-# Executing Queries in "sb"
-
-If one has performed the setup steps above, he will be sitting in `sb` at the '?' prompt.
-
-To make sure everything is running properly, dump the database with the following command (be sure to include the semicolon):
-
- dump;
-
-If a bunch of data prints to the screen, everything is properly setup. If not, execute the [teardown](#teardown) steps below and then re-execute the steps above.
-
-Don't try to understand all of the data that was printed with the dump command. The tables in the demo database are overly complicated in order to demonstrate all of the features of syncQL. We'll take things a step at a time and only explain the data as needed.
-
-Note: The vdl objects stored in the demo database are described in the following file:
-
- $JIRI_ROOT/release/go/src/v.io/x/ref/cmd/sb/internal/demodb/db_objects.vdl
-
-# SyncQL 101
-
-## The Basics
-
-SyncQL looks a lot like SQL. Each table in a Syncbase database looks like a table with exactly two columns, k and v:
-
-* `k`
- * the key portion of key/value pairs in the table
- * always of type string
-* `v`
- * the value portion of key/value pairs in the table
- * always of type vdl.Value
-
-### vdl
-
-A vdl.Value can represent the following types:
-
-<!-- TODO: Maybe use GFM tables here. -->
-<table>
- <tr>
- <td>Any</td>
- <td>Array</td>
- <td>Bool</td>
- <td>Byte</td>
- <td>Complex64</td>
- <td>Complex128</td>
- <td>Enum</td>
- </tr>
- <tr>
- <td>Float32</td>
- <td>Float64</td>
- <td>Int16</td>
- <td>Int32</td>
- <td>Int64</td>
- <td>List</td>
- <td>Map</td>
- </tr>
- <tr>
- <td>Set</td>
- <td>String</td>
- <td>Struct</td>
- <td>Time</td>
- <td>TypeObject</td>
- <td>Union</td>
- <td>Uint16</td>
- </tr>
- <tr>
- <td>Uint32</td>
- <td>Uint64</td>
- <td>?<type></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-</table>
-
-## A Simple Query
-
-The Customers table stores values of type Customer and of type Invoice.
-
-Let's select all of the keys in the Customer table. Again, note the semicolon. The semicolon is **not** part of the query, but `sb` uses it as a marker for end of statement.
-
- ? select k from Customers;
- +--------+
- | k |
- +--------+
- | 001 |
- | 001001 |
- | 001002 |
- | 001003 |
- | 002 |
- | 002001 |
- | 002002 |
- | 002003 |
- | 002004 |
- +--------+
-
-### Checker-time Errors
-
-Let's do the above query, but use Customer as the table name (i.e., forget to type the 's' at the end):
-
- ? select k from Customer;
- Error:
- select k from Customer
- ^
- 15: Table Customer does not exist (or cannot be accessed): syncbased:"demoapp/demodb".Exec: Does not exist: $table:Customer.
-
-The query can be fixed by up-arrowing and fixing it or by simply retyping it.
-
- ? select k from Customers;
- +--------+
- | k |
- +--------+
- | 001 |
- | 001001 |
- | 001002 |
- | 001003 |
- | 002 |
- | 002001 |
- | 002002 |
- | 002003 |
- | 002004 |
- +--------+
-
-SyncQL will catch and report the following types of errors before attempting to execute:
-
-* malformed queries (e.g., forgetting the required from clause)
-* mistyped table names
-* wrong number of arguments to a function
-* wrong type of literal (as an argument to a function or to a like expression)
-
-Unfortunately, mistyping field names will **not** be caught. This is because syncQL doesn't know the fields of the values in the database. That's because Syncbase allows anything to be stored in values.
-
-### Drilling Into the 'v' Column
-
-The Customer type has a Name field. Let's ask for it by using dot notation:
-
- ? select k, v.Name from Customers;
- +--------+---------------+
- | k | v.Name |
- +--------+---------------+
- | 001 | John Smith |
- | 001001 | |
- | 001002 | |
- | 001003 | |
- | 002 | Bat Masterson |
- | 002001 | |
- | 002002 | |
- | 002003 | |
- | 002004 | |
- +--------+---------------+
-
-You will notice that only keys "001" and "002" have values for Name. Let's see why that is.
-
-### Discovering Type of Values
-
-Let's find out the types of the values in the Customers table:
-
- ? select k, Type(v) from Customers;
- +--------+--------------------------------------------+
- | k | Type |
- +--------+--------------------------------------------+
- | 001 | v.io/x/ref/cmd/sb/internal/demodb.Customer |
- | 001001 | v.io/x/ref/cmd/sb/internal/demodb.Invoice |
- | 001002 | v.io/x/ref/cmd/sb/internal/demodb.Invoice |
- | 001003 | v.io/x/ref/cmd/sb/internal/demodb.Invoice |
- | 002 | v.io/x/ref/cmd/sb/internal/demodb.Customer |
- | 002001 | v.io/x/ref/cmd/sb/internal/demodb.Invoice |
- | 002002 | v.io/x/ref/cmd/sb/internal/demodb.Invoice |
- | 002003 | v.io/x/ref/cmd/sb/internal/demodb.Invoice |
- | 002004 | v.io/x/ref/cmd/sb/internal/demodb.Invoice |
- +--------+--------------------------------------------+
-
-We now have an explanation for why the Name column is missing on some rows. The type is not Customer on these rows. It is Invoice and-it just so happens-Invoice has no field with the name of "Name". Unresolved fields in the select clause return nil. `sb` represents nil as empty in output.
-
-### Limiting Rows by Type
-
-Let's print the name of only rows where the value type is Customer.
-
- ? select v.Name from Customers where Type(v) = "v.io/x/ref/cmd/sb/internal/demodb.Customer";
- +---------------+
- | v.Name |
- +---------------+
- | John Smith |
- | Bat Masterson |
- +---------------+
-
-`Type()` is a function available in syncQL. It returns a string representing a fully qualified type. It can be used in a where clause to limit the rows (i.e., the k/v pairs) matching a query.
-
-Having to specify a fully qualified type is rarely necessary. Let's use the like operator to write a simpler query:
-
- ? select v.Name from Customers where Type(v) like "%Customer";
- +---------------+
- | v.Name |
- +---------------+
- | John Smith |
- | Bat Masterson |
- +---------------+
-
-The like operator takes a string value on the right-hand-side. In this value, `%` matches 0 or more of any character. (Also, `_` matches any single character.)
-
-### The Invoice Type
-
-The Invoice type is defined as:
-
- type Invoice struct {
- CustId int64
- InvoiceNum int64
- Amount int64
- ShipTo AddressInfo
- }
-
-Let's print CustId, InvoiceNum and Amount for values of type Invoice:
-
- ? select v.CustId, v.InvoiceNum, v.Amount from Customers where Type(v) like "%Invoice";
- +----------+--------------+----------+
- | v.CustId | v.InvoiceNum | v.Amount |
- +----------+--------------+----------+
- | 1 | 1000 | 42 |
- | 1 | 1003 | 7 |
- | 1 | 1005 | 88 |
- | 2 | 1001 | 166 |
- | 2 | 1002 | 243 |
- | 2 | 1004 | 787 |
- | 2 | 1006 | 88 |
- +----------+--------------+----------+
-
-The where clause can contain any number of comparison expressions joined with "and" or "or". Parentheses are used to specify precedence. For example, let's make a [nonsensical] query for all customer #1 invoices for an amount < 50 and all customer #2 invoices for an amount > 200:
-
- ? select v.CustId, v.InvoiceNum, v.Amount from Customers where Type(v) like "%Invoice" and ((v.CustId = 1 and v.Amount < 50) or (v.CustId = 2 and v.Amount > 200));
- +----------+--------------+----------+
- | v.CustId | v.InvoiceNum | v.Amount |
- +----------+--------------+----------+
- | 1 | 1000 | 42 |
- | 1 | 1003 | 7 |
- | 2 | 1002 | 243 |
- | 2 | 1004 | 787 |
- +----------+--------------+----------+
-
-### Unresolved Fields in the Where Clause
-
-We've already seen that unresolved fields in the select clause return nil. Unresolved fields in expressions in the where clause result in the expression evaluating to false.
-
-Let's see this in action:
-
-The Customer type is defined as:
-
- type Customer struct {
- Name string
- Id int64
- Active bool
- Address AddressInfo
- Credit CreditReport
- }
-
-Let's select Customers with `Id > 0`:
-
- ? select v.Name from Customers where v.Id > 0;
- +---------------+
- | v.Name |
- +---------------+
- | John Smith |
- | Bat Masterson |
- +---------------+
-
-Since `v.Id` is not resolvable for Invoice records (which do not contain an Id field), the expression `v.Id > 0` returns false for Invoice rows. As such, the query excludes invoices and returns only the Customer rows.
-
-# SyncQL 201: A Closer Look
-
-## Select Clause
-
-Let's take a close look at what columns can be specified in the select clause.
-
-A column may be of one of the following categories:
-
-* k - the key column
-* v - the value column
-* field - a specific field in the value
-* function - a function which takes zero or more arguments (k, v, field or function)
-
-Let's select a column from each category above:
-
- ? select k, v, v.ShipTo.City, Lowercase(v.ShipTo.City) from Customers where Type(v) like "%Invoice";
- +--------+---------------------------------------------------------------------------------------------------------------------------+---------------+-----------+
- | k | v | v.ShipTo.City | Lowercase |
- +--------+---------------------------------------------------------------------------------------------------------------------------+---------------+-----------+
- | 001001 | {CustId: 1, InvoiceNum: 1000, Amount: 42, ShipTo: {Street: "1 Main St.", City: "Palo Alto", State: "CA", Zip: "94303"}} | Palo Alto | palo alto |
- | 001002 | {CustId: 1, InvoiceNum: 1003, Amount: 7, ShipTo: {Street: "2 Main St.", City: "Palo Alto", State: "CA", Zip: "94303"}} | Palo Alto | palo alto |
- | 001003 | {CustId: 1, InvoiceNum: 1005, Amount: 88, ShipTo: {Street: "3 Main St.", City: "Palo Alto", State: "CA", Zip: "94303"}} | Palo Alto | palo alto |
- | 002001 | {CustId: 2, InvoiceNum: 1001, Amount: 166, ShipTo: {Street: "777 Any St.", City: "Collins", State: "IA", Zip: "50055"}} | Collins | collins |
- | 002002 | {CustId: 2, InvoiceNum: 1002, Amount: 243, ShipTo: {Street: "888 Any St.", City: "Collins", State: "IA", Zip: "50055"}} | Collins | collins |
- | 002003 | {CustId: 2, InvoiceNum: 1004, Amount: 787, ShipTo: {Street: "999 Any St.", City: "Collins", State: "IA", Zip: "50055"}} | Collins | collins |
- | 002004 | {CustId: 2, InvoiceNum: 1006, Amount: 88, ShipTo: {Street: "101010 Any St.", City: "Collins", State: "IA", Zip: "50055"}} | Collins | collins |
- +--------+---------------------------------------------------------------------------------------------------------------------------+---------------+-----------+
-
-Depending on how wide your window is, the above mayh be a mess to look at. Selecting v in a program is often useful, but selecting such an aggregate from `sb` is less so. Let's do that query again without selecting v as a whole:
-
- ? select k, v.ShipTo.City, Lowercase(v.ShipTo.City) from Customers where Type(v) like "%Invoice";
- +--------+---------------+-----------+
- | k | v.ShipTo.City | Lowercase |
- +--------+---------------+-----------+
- | 001001 | Palo Alto | palo alto |
- | 001002 | Palo Alto | palo alto |
- | 001003 | Palo Alto | palo alto |
- | 002001 | Collins | collins |
- | 002002 | Collins | collins |
- | 002003 | Collins | collins |
- | 002004 | Collins | collins |
- +--------+---------------+-----------+
-
-v.ShipTo.City is interesting because it reaches into a nested struct. In this case, ShipTo is a field in type Invoice. ShipTo is of type AddressInfo, which is defined as:
-
- type AddressInfo struct {
- Street string
- City string
- State string
- Zip string
- }
-
-v.ShipTo resolves to an instance of AddressInfo. v.ShipTo.City resolves to an instance of string since City is a string field in AddressInfo.
-
-The Lowercase function takes a single string argument and simply returns a lowercase version of the argument.
-
-### Details on Value Field Specifications
-
-Up until now, we've used dot notation to specify fields within a struct (e.g., v.Name). Let's look at the full picture.
-
-As mentioned before, values in Syncbase are vdl.Values. A vdl.Value can represent any of the following types:
-
-<!-- TODO: Maybe use GFM tables here. -->
-<table>
- <tr>
- <td>Any</td>
- <td>Array</td>
- <td>Bool</td>
- <td>Byte</td>
- <td>Complex64</td>
- <td>Complex128</td>
- <td>Enum</td>
- </tr>
- <tr>
- <td>Float32</td>
- <td>Float64</td>
- <td>Int16</td>
- <td>Int32</td>
- <td>Int64</td>
- <td>List</td>
- <td>Map</td>
- </tr>
- <tr>
- <td>Set</td>
- <td>String</td>
- <td>Struct</td>
- <td>Time</td>
- <td>TypeObject</td>
- <td>Union</td>
- <td>Uint16</td>
- </tr>
- <tr>
- <td>Uint32</td>
- <td>Uint64</td>
- <td>?<type></td>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
-</table>
-
-#### Primitives
-
-The following vdl types are primitives and cannot be drilled into further:
-
-* Bool
-* Byte
-* Complex64
-* Complex128
-* Enum
-* Float32
-* Float64
-* Int16
-* Int32
-* Int64
-* String
-* Time (not a vdl primitive, but treated like primitives in syncQL)
-* TypeObject
-* Uint16
-* Uint32
-* Uint64
-
-#### ?<type>
-
-If missing, optional fields resolve to nil.
-
-#### Composites
-
-Any vdl composite type can be drilled into, and the result drilled into, until the result is a primitive data type. Following are the rules for how to drill into composite types, presented as examples:
-
-For the next few vdl.Value types, we'll be using the Composites table. The values in the table are of type Composite, which is defined as:
-
- type Composite struct {
- Arr Array2String
- ListInt []int32
- MySet set[int32]
- Map map[string]int32
- }
-
-In this type:
-
-* Arr is an array of length two and contains string elements.
-* ListInt is a list of int32s.
-* MySet is a set of int32s.
-* Map contains string keys with int32 values.
-
-Let's have a look at the single row in the Composites table:
-
- ? select k, v from Composites;
- +-----+----------------------------------------------------------------------------------+
- | k | v |
- +-----+----------------------------------------------------------------------------------+
- | uno | {Arr: ["foo", "bar"], ListInt: [1, 2], MySet: {1, 2}, Map: {"bar": 2, "foo": 1}} |
- +-----+----------------------------------------------------------------------------------+
-
-#### Array and List
-
-Array elements are specified with bracket syntax:
-
- ? select v.Arr[0], v.Arr[1], v.Arr[2] from Composites;
- +----------+----------+----------+
- | v.Arr[0] | v.Arr[1] | v.Arr[2] |
- +----------+----------+----------+
- | foo | bar | |
- +----------+----------+----------+
-
-The first two columns above return the elements in the array. The third column can't be resolved as the array is of size 2. As such, syncQL returns nil.
-
-The index need not be a literal:
-
- ? select v.Arr[v.ListInt[0]] from Composites;
- +---------------------+
- | v.Arr[v.ListInt[0]] |
- +---------------------+
- | bar |
- +---------------------+
-
-In the query above, the index is another field, the ListInt field. The first element of the list contains the value 1 and v.Arr[1] contains "bar". The index could be a function also.
-
-As you can see, from v.ListInt[0] in the query above, lists are treated the same as arrays in syncQL - to address a single element, put the index in brackets.
-
-By the way, syncQL will try to convert the value specified as the index into an int. Such as in this case where a float is converted to an int.
-
- ? select v.ListInt[1.0] from Composites;
- +--------------+
- | v.ListInt[1] |
- +--------------+
- | 2 |
- +--------------+
-
-If syncQL cannot convert the value to an int, nil is returned as the field cannot be resolved. This is a hard and fast rule for fields in the select clause: if they can't be resolved, they are nil.
-
-#### Map
-
-Values in maps are specified by supplying a key with bracket syntax. Note: The key need not be a literal; functions and fields work also.
-
- ? select v.Map["foo"] from Composites;
- +------------+
- | v.Map[foo] |
- +------------+
- | 1 |
- +------------+
-
-#### Set
-
-Brackets are also used for sets in syncQL. For sets, if the value specified inside the brackets is present in the set, the field evaluates to true. Otherwise, it evaluates to false.
-
-Let's execute a query on MySet - an int32 set which contains the values 1 and 2:
-
- ? select v.MySet[-23], v.MySet[2], v.MySet[55], v.MySet["xyzzy"] from Composites;
- +--------------+------------+-------------+----------------+
- | v.MySet[-23] | v.MySet[2] | v.MySet[55] | v.MySet[xyzzy] |
- +--------------+------------+-------------+----------------+
- | false | true | false | |
- +--------------+------------+-------------+----------------+
-
-The values -23 and 55 are not in the set; hence, the columns are false. The value 2 is in the set; hence, true. The value "xyzzy" cannot be converted to an int32; hence, nil is returned.
-
-#### Struct
-
-As we have seen earlier, structs are drilled into my specifying the name of the field in dot notation.
-
-Let's revisit the Customer type:
-
- type Customer struct {
- Name string
- Id int64
- Active bool
- Address AddressInfo
- Credit CreditReport
- }
-
-Now, let's print the `Id`, `Name` and `Active` status for Customer 1.
-
- ? select v.Id, v.Name, v.Active from Customers where v.Id = 1;
- +------+------------+----------+
- | v.Id | v.Name | v.Active |
- +------+------------+----------+
- | 1 | John Smith | true |
- +------+------------+----------+
-
-#### Union
-
-Dot notation is also used to drill into unions. If a specific field in the union is specified, but is not present in the instance, nil is returned.
-
-An example will help to explain this. The Students table contains the Student type which contains a union:
-
- type ActOrSatScore union {
- ActScore uint16
- SatScore uint16
- }
-
- type Student struct {
- Name string
- TestTime time.Time
- Score ActOrSatScore
- }
-
-Let's print the k, Name and Score columns in the Students table:
-
- ? select k, v.Name, v.Score from Students;
- +---+------------+----------------+
- | k | v.Name | v.Score |
- +---+------------+----------------+
- | 1 | John Smith | ActScore: 36 |
- | 2 | Mary Jones | SatScore: 1200 |
- +---+------------+----------------+
-
-Student #1, John Smith has an ACT score. Student #2, Mary Jones has an SAT score. `sb` has pretty printed the ActOrSatScore union.
-
-Let's print ActScore and SatScore:
-
- ? select k, v.Name, v.Score.ActScore, v.Score.SatScore from Students;
- +---+------------+------------------+------------------+
- | k | v.Name | v.Score.ActScore | v.Score.SatScore |
- +---+------------+------------------+------------------+
- | 1 | John Smith | 36 | |
- | 2 | Mary Jones | | 1200 |
- +---+------------+------------------+------------------+
-
-SatScore for John is nil. ActScore for Mary is nil.
-
-#### Any
-
-Lastly, let's look at how type any is handled. The AnythingGoes table contains the following type:
-
- type AnythingGoes struct {
- NameOfType string
- Anything any
- }
-
-The demo database contains two k/v pairs in this table. A Customer instance and a Student instance. Let's query for the key, the NameOfType field, the Name field (which is contained in both types), the Active field (contained in Customer) and the Score.ActScore (contained in Student's union field).
-
- ? select v.NameOfType, v.Anything.Name, v.Anything.Active, v.Anything.Score.ActScore from AnythingGoes;
- +--------------+-----------------+-------------------+---------------------------+
- | v.NameOfType | v.Anything.Name | v.Anything.Active | v.Anything.Score.ActScore |
- +--------------+-----------------+-------------------+---------------------------+
- | Student | John Smith | | 36 |
- | Customer | Bat Masterson | true | |
- +--------------+-----------------+-------------------+---------------------------+
-
-Any fields resolve to the actual type and value for the particular instance (which could be nil).
-
-### Functions in the Select Clause
-
-Functions can be freely used in the select clause, including as arguments to other functions and between brackets to drill into maps, sets, arrays and lists.
-
-#### List of Functions
-
-##### Time Functions
-
-* **Time(layout, value string) Time** - go's `time.Parse`, [doc](https://golang.org/pkg/time/#Parse)
-* **Now() Time** - returns the current time
-* **Year(time Time, Loc string) int** - Year of the time argument in location `Loc`.
-* **Month(time Time, Loc string) int** - Month of the time argument in location `Loc`.
-* **Day(time Time, Loc string) int** - Day of the time argument in location `Loc`.
-* **Hour(time Time, Loc string) int** - Hour of the time argument in location `Loc`.
-* **Minute(time Time, Loc string) int** - Minute of the time argument in location `Loc`.
-* **Second(time Time, Loc string) int** - Second of the time argument in location `Loc`.
-* **Nanosecond(time Time, Loc string) int** - Nanosecond of the time argument in location `Loc`.
-* **Weekday(time Time, Loc string) int** - Day of the week of the time argument in location `Loc`.
-* **YearDay(time Time, Loc string) int** - Day of the year of the time argument in location `Loc`.
-
-##### String Functions
-
-* **Atoi(s string) int** - converts `s` to an int
-* **Atof(s string) int** - converts `s` to a float
-* **HtmlEscape(s string) string** - go's `html.EscapeString`, [doc](https://golang.org/pkg/html/#EscapeString)
-* **HtmlUnescape(s string) string** - go's `html.UnescapeString`, [doc](https://golang.org/pkg/html/#UnescapeString)
-* **Lowercase(s string) string** - lowercase of `s`
-* **Split(s, sep string) []string** - substrings between separator `sep`
-* **Type(v vdl.Value) string** - the type of `v`
-* **Uppercase(s string) string** - uppercase of `s`
-* **RuneCount(s string) int** - the number of runes in `s`
-* **Sprintf(fmt string, a ...vdl.Value) string** - go's `fmt.Sprintf`, [doc](https://golang.org/pkg/fmt/#Sprintf)
-* **Str(v vdl.Value) string** - converts `v` to a string
-* **StrCat(s ...string) string** - concatenation of `s` args
-* **StrIndex(s, sep string) int** - index of `sep` in `s`, or -1 if `sep` is not present
-* **StrRepeat(s string, count int) string** - `s` repeated count times
-* **StrReplace(s, old, new string) string** - `s` with first instance of `old` replaced by `new`
-* **StrLastIndex(s, sep string) int** - index of the last instance of `sep` in `s`, or -1
-* **Trim(s string) string** - `s` with all leading and trailing whitespace removed (as defined by Unicode)
-* **TrimLeft(s string) string** - `s` with all leading whitespace removed (as defined by Unicode)
-* **TrimRight(s string) string** - `s` with trailing whitespace removed (as defined by Unicode)
-
-##### Math Functions
-
-* **Ceiling(x float) int** - least integer value greater than or equal to `x`
-* **Complex(r, i float) complex** - complex value from `r` and `i`
-* **Floor(x float) int** - greatest integer value less than or equal to `x`
-* **IsInf(f float, sign int) bool** - true if `f` is an infinity, according to `sign`
-* **IsNaN(f float) bool** - true if `f` is an IEEE 754 "not-a-number" value
-* **Log(x float) float** - natural logarithm of `x`
-* **Log10(x float) float** - decimal logarithm of `x`
-* **Pow(x, y float) float** - `x**y`
-* **Pow10(e int) float** - `10**e`
-* **Mod(x, y float) float** - remainder of `x/y`
-* **Real(c complex) float** - the real part of `c`
-* **Truncate(x float) float** - integer value of `x`
-* **Remainder(x, y float) float** - IEEE 754 floating-point remainder of `x/y`
-
-##### Len Function
-
-* **Len(v vdl.Value) int** - # entries in array/list/map/set, # bytes in string, 0 for nil, otherwise error
-
-#### Function Examples
-
-Let's use the Student table again. Recall that it contains Student types defined as:
-
- type Student struct {
- Name string
- TestTime time.Time
- Score ActOrSatScore
- }
-
-To print the day of the week (in PDT) that a student's tests were taken:
-
- ? select v.Name, Weekday(v.TestTime, "America/Los_Angeles") from Students;
- +------------+---------+
- | v.Name | Weekday |
- +------------+---------+
- | John Smith | 3 |
- | Mary Jones | 5 |
- +------------+---------+
-
-Three things to remember about using functions are:
-
-1. If the function contains only literals (or other functions that can be evaluated before query execution), the function will be executed beforehand and, if an error is encountered, it will be returned to the user.
-2. If any arguments are literals and the literal arguments can be checked before query execution, they are checked and an error returned to the user.
-3. If the error can't be found before query execution-that is, if the error occurs when evaluating a specific k/v pair, the column evaluates to nil (the same as always for the select clause).
-
-An example of case #1 above is the Now() function.
-
-Examples of case #2 are the many functions that contain a location argument. This argument is often a literal. Here's an example of getting the location wrong and getting an error before query execution:
-
-? select v.Name, Weekday(v.TestTime, "MyPlace") from Students;
- Error:
- select v.Name, Weekday(v.TestTime, "MyPlace") from Students
- ^
- 36: Can't convert to location: cannot find MyPlace in zip file /usr/local/go/lib/time/zoneinfo.zip.
-
-### As
-
-There just one more thing to say about the select clause. Sometimes you might want the column heading to be prettier than what is returned by default. This can be accomplished by using As. Let's try using it.
-
- ? select v.Name as Name from Customers where Type(v) like "%Customer";
- +---------------+
- | Name |
- +---------------+
- | John Smith |
- | Bat Masterson |
- +---------------+
-
-Instead of a column header of v.Name, the column is labeled Name.
-
-## From Clause
-
-The from clause must follow the where clause. There's not much to this clause. Just pick the table. If you get it wrong (or if you don't have access to the table), you will get an error before query execution.
-
- ? select k from Cust;
- Error:
- select k from Cust
- ^
- 15: Table Cust does not exist (or cannot be accessed): syncbased:"demoapp/demodb".Exec: Does not exist: $table:Cust.
- ? select k from Customers;
- +--------+
- | k |
- +--------+
- | 001 |
- | 001001 |
- | 001002 |
- | 001003 |
- | 002 |
- | 002001 |
- | 002002 |
- | 002003 |
- | 002004 |
- +--------+
-
-## Where Clause
-
-The where clause is optional and is used to filter the k/v pairs in a table. If the where clause evaluates to true for any given k/v pair, the pair is included in the results.
-
-We've already seen the where clause in action to limit the pairs returned in the Customers table to just those of type Customer:
-
- ? select k, v.Name from Customers where Type(v) like "%Customer";
- +-----+---------------+
- | k | v.Name |
- +-----+---------------+
- | 001 | John Smith |
- | 002 | Bat Masterson |
- +-----+---------------+
-
-For the two k/v pairs in the Customers table that contain a value of type Customer, the where clause returns true.
-
-In the query above, `Type(v) like "%Customer"` is a *comparison expression*. The where clause may contain multiple comparison expressions separated by 'and' or 'or' to form logical expressions. Furthermore, logical expressions may be grouped for precedence with parenthesis.
-
-Let' try another query with a logical expression grouped with parenthesis:
-
- ? select v.InvoiceNum, v.Amount from Customers where Type(v) like "%Invoice" and (v.Amount = 7 or v.Amount = 787);
- +--------------+----------+
- | v.InvoiceNum | v.Amount |
- +--------------+----------+
- | 1003 | 7 |
- | 1004 | 787 |
- +--------------+----------+
-
-### Comparison Expressions
-
-Comparison expressions are of the form:
-
- <left-operand> <operator> <right-operand>
-
-There's good news! Everything (Note: OK, not everything. Using 'As' doesn't make sense and can't be used in the where clause.) you've learned about what can be specified in the select clause can be specified as an operand in the where clause.
-
-Having said that, there is one important difference regarding fields that cannot be resolved. In the select clause, unresolved fields return nil. **_In the where clause, unresolved fields cause the comparison expression to be false._**
-
-To illustrate this point, let's do the following query:
-
- ? select v.InvoiceNum, v.Amount from Customers where v.Amount <> 787;
- +--------------+----------+
- | v.InvoiceNum | v.Amount |
- +--------------+----------+
- | 1000 | 42 |
- | 1003 | 7 |
- | 1005 | 88 |
- | 1001 | 166 |
- | 1002 | 243 |
- | 1006 | 88 |
- +--------------+----------+
-
-The above query doesn't print invoice number 1004, which is for the amount 787; but it also doesn't print the Customer records (which would have nil for InvoiceNum and Amount) because the comparison expression evaluates to false. It evaluates to false because v.Amount cannot be resolved for Customer types.
-
-Let's try another query to bring home the point. Let's match customer name with a wildcard expression that will match anything:
-
- ? select v.Name from Customers where v.Name like "%";
- +---------------+
- | v.Name |
- +---------------+
- | John Smith |
- | Bat Masterson |
- +---------------+
-
-The above is a backhanded way limit the query to just Customer types. Any name will do with the like "%" expression, but v.Name can't be resolved for values of type Invoice; thus, the comparision expression evaluates to false.
-
-#### Operators
-
-The following operators are available in syncQL:
-
-<table>
- <tr>
- <td>=</td>
- <td>!=</td>
- <td><</td>
- <td><=</td>
- <td>></td>
- </tr>
- <tr>
- <td>>=</td>
- <td>is</td>
- <td>is not</td>
- <td>like</td>
- <td>not like</td>
- </tr>
-</table>
-
-The `is` and `like` operators deserve explanations.
-
-##### Is/Is Not
-
-The `is` and `is not` operators are used to test against nil. They can be used to test for nil and are the exception to the otherwise hard and fast rule that operands that can't be resolved result in the comparison expression returning false.
-
-A backhanded way to select only invoice values is to select values where v.Name is nil. Invoice doesn't have a Name field, so Invoice values will be returned.
-
-? select v.InvoiceNum from Customers where v.Name is nil;
-
- +--------------+
- | v.InvoiceNum |
- +--------------+
- | 1000 |
- | 1003 |
- | 1005 |
- | 1001 |
- | 1002 |
- | 1004 |
- | 1006 |
- +--------------+
-
-One could also use the query:
-
- ? select v.InvoiceNum from Customers where v.InvoiceNum is not nil;
- +--------------+
- | v.InvoiceNum |
- +--------------+
- | 1000 |
- | 1003 |
- | 1005 |
- | 1001 |
- | 1002 |
- | 1004 |
- | 1006 |
- +--------------+
-
-Important: Field Contains Nil vs. Field Cannot be Resolved
-
-SyncQL makes no distinction between a field with a nil value vs. a field that cannot be resolved. As such, the first "backhanded" query above wouldn't work if the Name field could be nil in values of type Customer. Ditto for the second query-it wouldn't work if InvoiceNum could be nil in an Invoice.
-
-##### Like/Not Like
-
-Like and not like require the right-hand-side operand to evaluate to a string. The rhs operand may contain zero or more of the following wildcard characters:
-
-* % - A substitute for zero or more characters
-* _ - A substitute for a single character
-
-Let's find invoices where the ship to address is any house on Main St.
-
- ? select v.InvoiceNum, v.ShipTo.Street from Customers where Type(v) like "%Invoice" and v.ShipTo.Street like "%Main St.";
- +--------------+-----------------+
- | v.InvoiceNum | v.ShipTo.Street |
- +--------------+-----------------+
- | 1000 | 1 Main St. |
- | 1003 | 2 Main St. |
- | 1005 | 3 Main St. |
- +--------------+-----------------+
-
-Just one more thing. To escape a '%' or '_' wildcard character, the escape clause must be included in the query to specify an escape character to use. For example, to find all customers whose name includes an underscore character, one can write the following (using the '^' character to escape the underscore). Note: The backslash and space characters cannot be used as the escape character.
-
- ? select v.Id, v.Name from Customers where Type(v) like "%Customer" and v.Name like "%^_%" escape '^';
- +------+------------+
- | v.Id | v.Name |
- +------+------------+
- +------+------------+
-
-Alas, there are no customers with an underscore in their name. We can cheat by using a literal on the left hand side of the like.
- ? select v.Id, v.Name from Customers where Type(v) like "%Customer" and "John_Doe" like "%^_%" escape '^';
- +------+---------------+
- | v.Id | v.Name |
- +------+---------------+
- | 1 | John Smith |
- | 2 | Bat Masterson |
- +------+---------------+
-Since the like expression is now true for all customer rows, we see both of them.
-
-Let's do the same thing to look for a percent.
- ? select v.Id, v.Name from Customers where Type(v) like "%Customer" and "John%Doe" like "%^%%" escape '^';
- +------+---------------+
- | v.Id | v.Name |
- +------+---------------+
- | 1 | John Smith |
- | 2 | Bat Masterson |
- +------+---------------+
-
-#### Operand Value Coercion
-
-SyncQL will try to convert operands on either side of comparison expression to like types in order to perform a comparison.
-
-For example, let's find the customer with an `Id` of 1 (an int64 value); but use a float in the comparison. SyncQL converts `v.Id` to a float and then compares it against the 1.0 float literal.
-
- ? select v.Id, v.Name from Customers where Type(v) like "%Customer" and v.Id = 1.0;
- +------+------------+
- | v.Id | v.Name |
- +------+------------+
- | 1 | John Smith |
- +------+------------+
-
-Congratulations, you are finished with the where clause (and nearing the end of the tutorial)!
-
-## Offset and Limit Clauses
-
-The limit clause can be used to fetch the first n results. The limit clause together with the offset clause can be used to fetch query results in batches.
-
-Let's print the first two keys in the Customers table:
-
- ? select k from Customers limit 2;
- +--------+
- | k |
- +--------+
- | 001 |
- | 001001 |
- +--------+
-
-Now, let's fetch the next two keys:
-
- ? select k from Customers limit 2 offset 2;
- +--------+
- | k |
- +--------+
- | 001002 |
- | 001003 |
- +--------+
-
-## Executing Delete Statements
-
-In addition to select statements, syncql supports delete statements. (Insert and Update statements are planned.)
-
-The delete statement takes the form:
-
- delete from <table> [<where-clause>] [<limit-clause>]
-
-The where and limit clauses for delete are identical to the where and limit caluses for select.
-
-To delete all k/v pairs in a table, leave off the where and limit clauses:
-
- ? delete from Customers;
- +-------+
- | Count |
- +-------+
- | 9 |
- +-------+
-
-Exactly one row with exactly one "Count" column is always returned from an execution of the delete statement. The value of the column is the number of k/v paris deleted. In this case, all nine k/v pairs in the Customers table have been deleted. To verify this, select all entries in the Customers table:
-
- ? select k from Customers;
- +---+
- | k |
- +---+
- +---+
-
-Let's restore the entries by executing make-demo again.
- ? make-demo;
- Demo tables created and populated.
-
-Now, let's use the where clause to delete only invoice entries:
-? delete from Customers where Type(v) like "%.Invoice";
-
- +-------+
- | Count |
- +-------+
- | 7 |
- +-------+
-
-The seven invoice entries have been deleted. A select reveals the delete indeed deleted what we expected.
-
- ? select k, Type(v) from Customers;
- +-----+--------------------------------------------+
- | k | Type |
- +-----+--------------------------------------------+
- | 001 | v.io/x/ref/cmd/sb/internal/demodb.Customer |
- | 002 | v.io/x/ref/cmd/sb/internal/demodb.Customer |
- +-----+--------------------------------------------+
-
-Lastly, let's delete all Customers where the address is not Palo Alto:
-
- ? delete from Customers where v.Address.City <> "Palo Alto";
- +-------+
- | Count |
- +-------+
- | 1 |
- +-------+
-
-Since customer 001, John Smith, is in Palo Alto, the delete statement did not delete him. A select reveals Bat Masteson, who resides in Collins, IA, was indeed deleted.
-
- ? select k from Customers;
- +-----+
- | k |
- +-----+
- | 001 |
- +-----+
-
-Let's restore the tables before we try the limit clause on a delete:
-
- ? make-demo;
- Demo tables created and populated.
-
-Now, let's delete Invoice entries again, but put a limit of two on the statement:
-
- ? delete from Customers where Type(v) like "%.Invoice" limit 2;
- +-------+
- | Count |
- +-------+
- | 2 |
- +-------+
-
-A select reveals only the first two invoices (in ascending key order) have been deleted ("001001" and "001002"):
-
- ? select k from Customers;
- +--------+
- | k |
- +--------+
- | 001 |
- | 001003 |
- | 002 |
- | 002001 |
- | 002002 |
- | 002003 |
- | 002004 |
- +--------+
-
-Congratulations! You've finished the syncQL tutorial. Don't forget to proceed to the [teardown](#teardown) steps to clean up! Also, check out the brief introduction to executing syncQL queries from a Go program.
-
-# Teardown
-
-Exit `sb` with <ctrl-d>, kill the syncbased and mounttabled background jobs and delete the principal directory:
-
- <ctrl-d>
- sudo kill $(jobs -p)
- rm -rf /tmp/me
-
-# Executing SyncQL from a Go Program
-
-When using Syncbase's Get() and Put() functions, the programmer can often ignore the fact that keys and values are stored as type vdl.Value; but this is not true when making syncQL queries as returned columns are always of type vdl.Value. For example, given the following query:
-
- select k, v.Id, v.Address.Zip from Customers where Type(v) like \"%Customer\"
-
-a triple of vdl.Values will be returned for each k/v pair in the Customer table. The caller could interrogate the vdl.Value as to the actual types stored inside, but usually the caller will know the types. As such, the calling code will just need to call the String() functions for the first and third columns and the Int() function for the second column.
-
-The following code snippet might help to clarify the above:
-
- q := "select k, v.Id, v.Address.Zip from Customers where Type(v) like \"%Customer\""
- h, rs, err := db.Exec(ctx, q)
- if err != nil {
- fmt.Printf("Error: %v\n", err)
- } else {
- // Print Headers
- fmt.Printf("%30.30s,%8.8s, %5.5s\n", h[0], h[1], h[2])
- for rs.Advance() {
- c := rs.Result()
- fmt.Printf("%s30.30 %8.8d %5.5s\n", c[0], c[1], c[2])
- }
- if rs.Error() {
- fmt.Printf("Error: %v\n", err)
- }
- }
-
-One will need to take the Syncbase tutorial before attempting to execute syncQL queries in a Go program; but once you are comfortable with Syncbase, the Exec function is straightforward. Exec can be performed on the database object or from a readonly or writable batch object.
-
-Exec simply takes a context and the syncQL query (don't end it with a semicolon). If successful, an array of column headers will be returned along with a stream of vdl.Value tuples. Iteration over the stream will be familiar to Vanadium developers.
diff --git a/content/tutorials/syncbase/user-guide.md b/content/tutorials/syncbase/user-guide.md
deleted file mode 100644
index 556f9d3..0000000
--- a/content/tutorials/syncbase/user-guide.md
+++ /dev/null
@@ -1,404 +0,0 @@
-= yaml =
-title: Syncbase User Guide
-layout: tutorial
-wherein: you learn about Syncbase
-toc: true
-= yaml =
-
-# Overview
-
-Syncbase is a storage system for developers that makes it easy to synchronize
-app data between devices. It works even when devices are not connected to the
-Internet.
-
-- Synchronization between one user's devices is trivial to configure; multiple
- users can synchronize specific data too
- - Low latency synchronization enables many apps to use storage for
- asynchronous communication
-- Internet connection not required
- - Local storage still works when not connected to the internet
- - Synchronization protocol is peer-to-peer and works just as well over local
- WiFi or Bluetooth as the internet
-- Conflict resolution system merges data when devices have been working offline
-- Unified storage model handles both structured data and blobs
- - Structured databases are easy to use and queryable
- - Blob caching policies work well on resource-limited devices
-- Powerful management tools
- - Leverages the Vanadium namespace and security system
- - Open source reference implementation of Syncbase for developers who want
- tight control over the data
-
-The initial version of Syncbase is ready for testing and evaluation by early
-adopters - it is suitable for prototyping, but not for production applications.
-
-This document covers installation and basic usage. It should be enough for
-developers to get started using Syncbase. For more details on the design, see
-the [Syncbase Overview] document.
-
-# Installation
-
-Syncbase is a Go program that depends on Vanadium and several other libraries.
-The following steps cover all of the prerequisites, and should work on both
-Linux and OS X.
-
-1. Follow the [installation instructions] to install prerequisites and fetch the
- Vanadium repositories, which include Syncbase as well as the Todos demo app.
-
- The instructions below assume you've set the `JIRI_ROOT` environment variable
- and have added `$JIRI_ROOT/.jiri_root/scripts` to your `PATH`:
-
- # Edit to taste.
- export JIRI_ROOT=${HOME}/vanadium
- export PATH=$PATH:$JIRI_ROOT/.jiri_root/scripts
-
- Recommended: Add the lines above to your `~/.bashrc` or similar.
-
-2. Run the Syncbase tests.
-
- jiri go test v.io/v23/syncbase/...
-
-3. Build the Syncbase server binary and other Vanadium tools.
-
- jiri go install v.io/...
-
-<!-- TODO: On OS X, step (2) opens a bunch of warning popups about accepting
-incoming connections. We should make all test servers listen on the loopback
-address. -->
-
-Note, the `jiri go` command simply augments the `GOPATH` environment variable
-with the various paths to Vanadium Go code under the `JIRI_ROOT` directory, and
-then runs the standard `go` tool.
-
-You should now have the following binaries available, among others:
-
-- `$JIRI_ROOT/release/go/bin/mounttabled`
-- `$JIRI_ROOT/release/go/bin/syncbased`
-- `$JIRI_ROOT/release/go/bin/vrpc`
-
-<!-- TODO: Add instructions about how to run a cloud instance of Syncbase. -->
-
-## Running the Todos Demo App
-
-The [Todos demo app] is a web application that runs in Chrome. Before you can
-run it, you must install the [Vanadium Chrome extension].
-
-To run the app, follow the demo setup instructions here:
-https://github.com/vanadium/todos/blob/master/demo.md
-
-To get a fresh copy of the Vanadium source code and rebuild everything for the
-demo, run these commands from the todos root dir:
-
- jiri update
- make clean
-
-If you get certificate signature verification errors when running the webapp,
-try uninstalling and reinstalling your [Vanadium Chrome extension].
-
-# Basic Usage
-
-In this section we demonstrate the basics of working with a local instance of
-Syncbase: setting up an initial `<app>/<database>/<table>` hierarchy, reading
-and writing data, and using batches.
-
-Application developers are expected to use Syncbase through a client library.
-Currently we provide client libraries for
-[Go](https://vanadium.googlesource.com/roadmap.go.syncbase/+/master/v23/syncbase/model.go),
-[JavaScript](https://vanadium.googlesource.com/roadmap.js.syncbase/+/master/src/syncbase.js),
-[Java](#todo) (Android), and [Dart](#todo) (Mojo/Sky). In this guide, to keep
-things simple and concise, we use the Go client library and ignore all errors
-returned from Syncbase.
-
-Let's create an app with a single NoSQL database, containing a single table. The
-following code snippets assume we have a Syncbase instance serving at
-`localhost:4002`.
-
- import "v.io/syncbase/v23/syncbase"
- ctx, shutdown := v23.Init() // initialize the Vanadium runtime
- defer shutdown()
- s := syncbase.NewService("/localhost:4002")
- a := s.App("myapp")
- a.Create(ctx, perms) // assumes "perms" is defined
- d := a.NoSQLDatabase("mydb", nil) // nil means no schema
- d.Create(ctx, perms)
- t := d.Table("mytable")
- t.Create(ctx, nil) // nil means copy perms from db
-
-We've created the hierarchy `myapp/mydb/mytable`. Now, let's read and write some
-key-value data to our table.
-
- t.Put(ctx, "foo", "mystr")
- t.Put(ctx, "bar", 600673)
- t.Put(ctx, "baz", mystruct) // assumes "mystruct" is defined
- var s1, s2 string
- var i1 int
- t.Get(ctx, "foo", &s1) // s1 will be "mystr"
- t.Get(ctx, "bar", &i1) // i1 will be 600673
- expectError(t.Get(ctx, "baz", &s2)) // s2 is the wrong type
-
-Next, let's scan over a range of key-value records. Scan returns a stream object
-that reads from a consistent snapshot taken at the time of the RPC.
-
- it := t.Scan(ctx, nosql.Range("a", "z")) // covers ["a", "z")
- it := t.Scan(ctx, nosql.Prefix("ba")) // covers keys with prefix "ba"
- for it.Advance() {
- var v *vdl.Value // can represent any type
- it.Value(&v)
- fmt.Println(it.Key(), v)
- }
- handleError(it.Err())
-
-Syncbase also supports SQL-like queries to scan over rows that match some
-predicate. For more information, see the [Queries](#queries) section of this
-guide.
-
-Finally, let's perform a set of operations in a batch. Batches follow ACID
-semantics on the local Syncbase instance, and relaxed ACID semantics when used
-with synchronization, as described in the [Syncbase Overview] document.
-
- // For a read-only batch (i.e. to read from a snapshot), we'd set
- // BatchOptions.ReadOnly to true.
- nosql.RunInBatch(ctx, d, wire.BatchOptions{},
- func(bd nosql.BatchDatabase) error {
- bt = bd.Table("mytable")
- bt.Get(ctx, "bar", &i1) // i1 will be 600673
- bt.Put(ctx, "foo", fmt.Sprintf(i1))
- bt.Put(ctx, "bar", 2*i1)
- })
-
-This batch writes the old value of "bar" to "foo" (as a string), then replaces
-"bar" with twice its original value. `nosql.RunInBatch` is a helper function
-that handles creating and committing the batch, as well as retrying the batch if
-a concurrent batch preempted ours.
-
-This concludes the "basic usage" section. For the complete Syncbase API, consult
-the client library in your language of choice. For "real-world usage", see the
-todos example app code.
-
-# Data Modeling
-
-Syncbase organizes data hierarchically: App > Database > Table > Row
-
-The "App" layer of hierarchy allows for multiple apps to share the same Syncbase
-instance, so that (for example) we can run a single Syncbase instance on a
-mobile device to service all apps running on that device.
-
-The Database is a set of NoSQL tables. It provides the scope for queries and
-batches similar to many relational databases. We expect that most apps will have
-a single database. It exists primarily because we expect to provide other types
-of databases in the future (e.g. SQL, timeseries).
-
-A Table is a lexicographically ordered set of rows with each row key mapping to
-a single value. Values can be anything representable by [VOM] such as simple
-types like string and int32 or complex, application-defined structs. We expect
-that many developers will choose to use [VDL] to model their data, though they
-are free to define structs in their native programming language. The values in a
-single table can be heterogeneous, allowing for better spatial locality than
-splitting the values into homogeneous tables.
-
-We expect developers to give a common key prefix to related data. For example, a
-TODO list might have a table like:
-
- <list uuid> -> List
- <list uuid>/entries/<uuid> -> Entry
- <list uuid>/entries/<uuid> -> Entry
-
-All entries in the list have a common prefix, making it easy to find all of the
-entries in the list. Note the use of Universally Unique Identifiers (UUIDs). The
-act of sharing and synchronizing this list with another user will cause this
-list to be spliced into that user's database. By using UUIDs, we ensure that
-this list will not collide with a list already in that database.
-
-## Access Control
-
-Syncbase provides fine grained access control, using the [Vanadium security
-model] for identification and authentication. Developers provide a key prefix to
-control which rows are covered by a given access control list (ACL). If there
-are multiple ACL prefixes for a row, the one with the longest prefix wins. This
-behavior makes it easy to set an ACL on related data and have new data
-automatically inherit the right ACL if possible.
-
-In our example above, the list is fully collaborative, so the developer would
-set a simple ACL like:
-
- <list uuid> -> {<owner>: Read, Write, Admin; <friends>: Read, Write}
-
-All entries in the list would inherit this ACL. We expect that most apps will
-use a single ACL for a group of related data, so we optimized for this case. To
-hide an entry from the friends, the owner would create another ACL:
-
- <list uuid>/entries/<uuid> -> {<owner>: Read, Write, Admin}
-
-The existence of this ACL is revealed to the lowest levels of Syncbase on the
-friends' devices, but the content of the entry is not.
-
-## Syncgroups
-
-As you think about how to model the data for your application, it is important
-to understand how to specify which data to sync between devices. A syncgroup
-represents both what data should be synced and who to sync it with. The what is
-specified with a set of key prefixes similar to access control. Therefore, it is
-essential that related data have a common key prefix. See the section on
-[Sync](#sync) below for more details. The who is specified by a syncgroup ACL
-that determines the devices that are allowed to join the syncgroup. Typically
-this is done by specifying the identities of the device owners (and not their
-specific devices) to give each user the flexibility in selecting from which of
-their device(s) to join the syncgroup and participate in the data
-synchronization.
-
-# Queries
-
-The Syncbase query language, [syncQL], is very similar to SQL. SyncQL uses the
-general structure of SQL's SELECT statement. It efficiently evaluates predicates
-(the WHERE clause) inside the Syncbase process. It does not currently support
-JOINs or indexes.
-
-SyncQL uses the keywords k and v to represent the key and value for the row.
-SyncQL can unpack structs to evaluate the fields within. In this example, the
-structs in the Customer table have a field called "State". The query returns the
-row key and complete value struct for each row where State is 'CA'.
-
- SELECT k, v FROM Customer WHERE v.State = 'CA'
-
-Because the key has significant structure, it is useful to restrict the query to
-a subset of the data. For example, to fetch all of the data for a customer with
-UUID 12345 (i.e. all rows with the prefix 12345):
-
- SELECT v FROM Customer WHERE k LIKE "12345%"
-
-See the syncQL specification for the complete language and more examples.
-
-<!-- TODO: Add an example here that shows what Go code the developer would
-write. -->
-
-# Blobs
-
-A blob is created within a database and identified by a unique BlobRef. The app
-stores the BlobRef in a row in a NoSQL table (i.e. in the value structure of a
-NoSQL entry). When the table is synchronized to another device, the BlobRef can
-be used to fetch the blob and cache it in that device's local store. Blobs give
-the app a mechanism for lazy-fetching of data compared to the eager syncing of
-the NoSQL tables.
-
-Because blobs are typically large, the APIs to put and get blobs use a streaming
-interface.
-
- // Create a blob. Assumes an existing hierarchy myapp/mydb/mytable.
- s := syncbase.NewService("/localhost:4002")
- d := s.App("myapp").NoSQLDatabase("mydb", nil)
- b, err := d.CreateBlob(ctx)
- bw, err := b.Put(ctx)
- for moreData {
- err = bw.Send(dataByteArray)
- }
- err = bw.Close()
- err = b.Commit()
- blobRef := b.Ref()
- fmt.Printf("Blob written: BlobRef %s\n", blobRef)
-
-The BlobRef is used to get the blob data. If the blob is not available locally,
-Syncbase locates a device that has a copy of the blob, fetches it, caches it
-locally, and streams it to the client.
-
- // Retrieve a blob. Assumes the same initialization above.
- b := d.Blob(blobRef)
- br, err := b.Get(ctx, 0) // Get the full blob, i.e. from offset 0.
- var data []byte
- for br.Advance() {
- data = append(data, br.Value()...)
- }
- err = br.Err()
- fmt.Printf("Blob read: BlobRef %s, len %d\n", blobRef, len(data))
-
-# Sync
-
-Syncbase provides peer-to-peer synchronization of data between a set of devices.
-The cloud is just another peer, and is not required. Devices attempt to discover
-one another by all means available, including the local network (over mDNS, aka
-Bonjour) and a configurable set of name servers.
-
-The fundamental unit of synchronization is a syncgroup. Syncgroups are tied to a
-database and can span tables. A syncgroup specifies what data to sync (as a set
-of table names and key prefixes) and who to sync it with (as an ACL specifying
-who can join the syncgroup). Syncgroup data may overlap or be nested within the
-data of other syncgroups. For example SG1 may specify prefixes "foo" and "bar"
-with SG2 specifying prefixes "f" and/or "bar123".
-
-To guarantee consistent access behavior across all devices within a syncgroup,
-the app must create a prefix-ACL (aka data-ACL) for each syncgroup prefix before
-it creates the syncgroup. Syncbase enforces this setup and synchronizes the
-prefix-ACLs along with the data. This way on every device the same prefix-ACLs
-are available and enforced for the synchronized data.
-
-A syncgroup is identified by a globally unique name selected by the creator.
-This name is given out-of-band to the other devices so they can join the
-syncgroup. The syncgroup name is a Vanadium name that is used to make the RPC
-calls to create or join the syngroup. Thus the syncgroup name must start with a
-Vanadium-resolvable server name.
-
-In many apps, you'll have one device create a syncgroup (e.g. a new todo list),
-and other devices join that syncgroup. The following code creates a syncgroup
-with table "mytable" and key prefix "foo".
-
-<!-- TODO: This syncgroup setup code is somewhat obtuse. Hopefully we can
-simplify the setup and improve the documentation. Various issues have been filed
-to track this. -->
-
- // Assumes we've already created the hierarchy myapp/mydb/mytable.
- s := syncbase.NewService("/localhost:4002")
- d := s.App("myapp").NoSQLDatabase("mydb", nil)
- sg := d.Syncgroup("/localhost:4002/%%sync/myapp/mydb/mysg")
- sg.Create(ctx, wire.SyncgroupSpec{
- Description: "my syncgroup",
- Perms: perms,
- Prefixes: []wire.TableRow{{TableName: "mytable", Row: "foo"}},
- MountTables: []string{"/ns.dev.v.io:8101"},
- }, wire.SyncgroupMemberInfo{
- SyncPriority: 8
- })
-
-The code below joins the syncgroup.
-
- sg.Join(ctx, wire.SyncgroupMemberInfo{
- SyncPriority: 8
- })
-
-In some cases, an app won't know in advance whether it should create a syncgroup
-or join an existing syncgroup. For example, this can happen when an app uses a
-syncgroup to sync a user's data across their devices; in this case, the app
-won't know in advance whether it has already been installed on some other device
-belonging to the user. This implies that the syncgroup name must be known in
-advance by all instances of the app. In this case, the recommended approach is
-to try to join that syncgroup. If the join fails with an error indicating that
-the syncgroup does not exist (ErrNoExist), as opposed to a permission denial or
-a network communication error, then create the syncgroup. This could still lead
-to multiple concurrent creations of the syncgroup. In the future we plan to
-provide a mechanism for apps to merge such disconnected syncgroups when there is
-no ambiguity as to whether they really ought to be the same syncgroup.
-
-## Conflict Resolution
-
-Syncbase was designed to allow for predefined conflict resolution policies such
-as last-write-wins as well as custom, app-driven conflict resolution. The
-Syncbase implementation does not yet expose hooks for custom resolvers;
-last-write-wins is the only resolver currently available.
-
-*TODO: Expand this section once we finish adding support for custom conflict
-resolvers, additional types of predefined resolvers, CRDTs, etc.*
-
-*TODO: Maybe add some info about schemas here.*
-
-## Interaction with ACLs
-
-*TODO: Fill this out.*
-
-# Frequently Asked Questions
-
-*TODO: Grow this section as questions arise.*
-
-[Syncbase Overview]: /concepts/syncbase-overview.html
-[installation instructions]: /installation/
-[syncQL]: /tutorials/syncbase/syncql-tutorial.html
-[VOM]: /concepts/rpc.html#vom
-[VDL]: /concepts/rpc.html#vdl
-[Vanadium security model]: /concepts/security.html
-[todos demo app]: https://github.com/vanadium/todos
diff --git a/public/images/android-icon-green.svg b/public/images/android-icon-green.svg
new file mode 100644
index 0000000..4a4043e
--- /dev/null
+++ b/public/images/android-icon-green.svg
@@ -0,0 +1,4 @@
+<svg fill="#a4c639" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+ <path d="M0 0h24v24H0z" fill="none"/>
+ <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48C13.85 1.23 12.95 1 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31C6.97 3.26 6 5.01 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/background.svg b/public/images/background.svg
new file mode 100644
index 0000000..cf7d8ad
--- /dev/null
+++ b/public/images/background.svg
@@ -0,0 +1,696 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 1400 654" enable-background="new 0 0 1400 654" xml:space="preserve">
+<g id="Layer_2">
+</g>
+<g id="voronoi">
+ <polyline fill="#00838F" points="1400,0 1400,654 0,654 0,0 "/>
+ <g opacity="0.35">
+
+ <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="0" y1="6.799564e-08" x2="1" y2="6.799564e-08" gradientTransform="matrix(153.8887 119.981 -226.6427 176.7045 -72.8988 -54.7661)">
+ <stop offset="0" style="stop-color:#005465"/>
+ <stop offset="1" style="stop-color:#005566"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_1_)" points="0,1.1 0,18.5 22.2,2.9 0,1.1 "/>
+
+ <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.374225e-09" x2="1" y2="-3.374225e-09" gradientTransform="matrix(185.1201 175.9945 -272.6394 259.1994 -101.3542 -25.7743)">
+ <stop offset="0" style="stop-color:#005566"/>
+ <stop offset="1" style="stop-color:#00596A"/>
+ </linearGradient>
+ <path fill="url(#SVGID_2_)" d="M22.2,2.9L22.2,2.9L0,18.5v140.8l50.4,18.4l0,0l0,0l0,0c0.4-1.1,1.3-1.9,2.5-2.1L22.2,2.9"/>
+
+ <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="0" y1="1.418775e-07" x2="1" y2="1.418775e-07" gradientTransform="matrix(185.1987 207.3704 -272.7551 305.4089 -98.6748 74.1295)">
+ <stop offset="0" style="stop-color:#005566"/>
+ <stop offset="1" style="stop-color:#005768"/>
+ </linearGradient>
+ <path fill="url(#SVGID_3_)" d="M0,159.3v88.5l51.5-66.3c-0.8-0.6-1.3-1.5-1.3-2.6l0,0l0,0l0,0l0,0c0-0.4,0.1-0.8,0.2-1.1L0,159.3"
+ />
+
+ <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="0" y1="1.410262e-08" x2="1" y2="1.410262e-08" gradientTransform="matrix(213.8639 139.5331 -314.9723 205.5002 -46.6112 173.5309)">
+ <stop offset="0" style="stop-color:#005B6C"/>
+ <stop offset="1" style="stop-color:#005B6D"/>
+ </linearGradient>
+ <path fill="url(#SVGID_4_)" d="M56.6,180.1c-0.5,1.3-1.7,2.2-3.1,2.2c-0.8,0-1.5-0.3-2-0.7l0,0L0,247.9v44.9l156.4-73.4
+ c-0.4-0.5-0.6-1.2-0.6-1.9l0,0l0,0l0,0l0,0c0-0.2,0-0.4,0.1-0.6L56.6,180.1"/>
+
+ <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="0" y1="-1.780636e-07" x2="1" y2="-1.780636e-07" gradientTransform="matrix(213.7789 281.5624 -314.8472 414.6768 -39.7618 198.2655)">
+ <stop offset="0" style="stop-color:#005566"/>
+ <stop offset="1" style="stop-color:#005566"/>
+ </linearGradient>
+ <path fill="url(#SVGID_5_)" d="M156.4,219.3L156.4,219.3L0,292.7v195.9l157.7-268.2C157.2,220.1,156.7,219.8,156.4,219.3"/>
+
+ <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="0" y1="7.007475e-08" x2="1" y2="7.007475e-08" gradientTransform="matrix(243.7514 281.5525 -358.9898 414.6621 -24.6119 239.1534)">
+ <stop offset="0" style="stop-color:#00414F"/>
+ <stop offset="1" style="stop-color:#005262"/>
+ </linearGradient>
+ <path fill="url(#SVGID_6_)" d="M157.7,220.4L157.7,220.4L0,488.6v10.6l234-16.3l0-0.2l0,0l0,0c0-1.5,1-2.8,2.4-3.2l-76.5-258.9
+ c-0.2,0.1-0.5,0.1-0.8,0.1C158.6,220.7,158.1,220.6,157.7,220.4"/>
+
+ <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="0" y1="-1.118306e-07" x2="1" y2="-1.118306e-07" gradientTransform="matrix(198.1966 264.6968 -291.8981 389.8376 165.3561 209.6425)">
+ <stop offset="0" style="stop-color:#006477"/>
+ <stop offset="1" style="stop-color:#006679"/>
+ </linearGradient>
+ <path fill="url(#SVGID_7_)" d="M161.9,219c-0.5,0.8-1.2,1.3-2.1,1.6l76.5,258.9c0.3-0.1,0.6-0.1,0.9-0.1c0.6,0,1.2,0.2,1.7,0.5
+ l0,0l0,0l0,0l0,0L355,292.1c-0.6-0.6-1-1.4-1-2.4l0,0l0,0l0,0l0,0c0-0.8,0.3-1.6,0.8-2.2L161.9,219"/>
+
+ <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="5.293696e-07" y1="3.851164e-07" x2="1" y2="3.851164e-07" gradientTransform="matrix(252.9261 176.0053 -372.502 259.2153 2.0261 16.9421)">
+ <stop offset="0" style="stop-color:#005D6F"/>
+ <stop offset="1" style="stop-color:#006173"/>
+ </linearGradient>
+ <path fill="url(#SVGID_8_)" d="M22.2,2.9l30.7,172.8c0.2,0,0.4-0.1,0.6-0.1c1.4,0,2.5,0.8,3,2l0,0l0,0l0,0l0,0l215.6-93.8
+ c-0.2-0.4-0.3-0.9-0.3-1.3l0,0l0,0l0,0l0,0c0-0.3,0.1-0.7,0.2-1L22.2,2.9"/>
+
+ <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.922651e-09" x2="1" y2="-3.922651e-09" gradientTransform="matrix(221.6829 135.6178 -326.488 199.7339 68.4632 73.2733)">
+ <stop offset="0" style="stop-color:#006072"/>
+ <stop offset="1" style="stop-color:#006577"/>
+ </linearGradient>
+ <path fill="url(#SVGID_9_)" d="M272.1,83.8L272.1,83.8L56.5,177.6c0.2,0.4,0.3,0.9,0.3,1.3l0,0l0,0l0,0l0,0c0,0.4-0.1,0.8-0.2,1.1
+ l99.3,36.8c0.3-1.6,1.6-2.8,3.3-2.8c1,0,1.8,0.4,2.4,1.1l0,0l0,0l0,0l0,0L273,84.9C272.6,84.6,272.3,84.2,272.1,83.8"/>
+
+ <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="0" y1="2.051747e-07" x2="1" y2="2.051747e-07" gradientTransform="matrix(198.1561 205.9781 -291.8385 303.3584 155.5287 86.1713)">
+ <stop offset="0" style="stop-color:#00677A"/>
+ <stop offset="1" style="stop-color:#006E81"/>
+ </linearGradient>
+ <path fill="url(#SVGID_10_)" d="M273,84.9L273,84.9L161.5,215.2c0.5,0.6,0.9,1.4,0.9,2.2l0,0l0,0l0,0l0,0c0,0.6-0.2,1.2-0.5,1.7
+ l192.9,68.5c0.4-0.5,1-0.9,1.7-1l-80.2-201c-0.4,0.2-0.8,0.2-1.2,0.2C274.3,85.8,273.5,85.4,273,84.9"/>
+
+ <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="0" y1="3.092500e-07" x2="1" y2="3.092500e-07" gradientTransform="matrix(308.9675 91.2562 -455.0381 134.3994 76.6425 -24.9053)">
+ <stop offset="0" style="stop-color:#005E6F"/>
+ <stop offset="1" style="stop-color:#006376"/>
+ </linearGradient>
+ <path fill="url(#SVGID_11_)" d="M325.8,0H99L22.2,2.9L272,81.5c0.4-1.3,1.7-2.3,3.1-2.3c0.6,0,1.2,0.2,1.7,0.5l0,0l0,0l0,0l0,0
+ L325.8,0"/>
+
+ <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="0" y1="1.491675e-06" x2="1" y2="1.491675e-06" gradientTransform="matrix(449.772 11.7332 -662.4108 17.2803 -225.9595 -6.0168)">
+ <stop offset="0" style="stop-color:#005768"/>
+ <stop offset="1" style="stop-color:#005E6F"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_12_)" points="99,0 0,0 0,1.1 22.2,2.9 99,0 "/>
+
+ <linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.592322e-08" x2="1" y2="-3.592322e-08" gradientTransform="matrix(246.3963 241.1815 -362.8851 355.205 265.4044 0.3603)">
+ <stop offset="0" style="stop-color:#00697C"/>
+ <stop offset="1" style="stop-color:#006C80"/>
+ </linearGradient>
+ <path fill="url(#SVGID_13_)" d="M338.1,0h-12.4l-48.9,79.6c0.9,0.6,1.6,1.6,1.6,2.8l0,0l0,0l0,0l0,0c0,0.6-0.2,1.2-0.5,1.7
+ l240.8,146.5l0,0l0,0l0,0c0.2-0.3,0.5-0.6,0.8-0.9L338.1,0"/>
+
+ <linearGradient id="SVGID_14_" gradientUnits="userSpaceOnUse" x1="0" y1="-4.100093e-08" x2="1" y2="-4.100093e-08" gradientTransform="matrix(246.4254 206.0064 -362.9279 303.4 250.9928 102.6025)">
+ <stop offset="0" style="stop-color:#006E81"/>
+ <stop offset="1" style="stop-color:#00758A"/>
+ </linearGradient>
+ <path fill="url(#SVGID_14_)" d="M277.9,84.2c-0.4,0.6-0.9,1.1-1.6,1.4l80.2,201c0.2-0.1,0.5-0.1,0.8-0.1c1,0,1.9,0.5,2.5,1.2l0,0
+ l0,0l0,0l0,0l158.7-54.1c-0.1-0.3-0.2-0.7-0.2-1.1l0,0l0,0l0,0l0,0c0-0.6,0.2-1.2,0.5-1.7L277.9,84.2"/>
+
+ <linearGradient id="SVGID_15_" gradientUnits="userSpaceOnUse" x1="0" y1="7.352628e-08" x2="1" y2="7.352628e-08" gradientTransform="matrix(190.3429 242.4916 -280.3313 357.1344 376.0591 -67.6933)">
+ <stop offset="0" style="stop-color:#006578"/>
+ <stop offset="1" style="stop-color:#006B7E"/>
+ </linearGradient>
+ <path fill="url(#SVGID_15_)" d="M520.3,0H338.1l181.3,229.8c0.6-0.4,1.3-0.7,2-0.7L520.3,0"/>
+
+ <linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="0" y1="4.604990e-07" x2="1" y2="4.604990e-07" gradientTransform="matrix(155.1263 256.8058 -228.4654 378.2159 465.6725 249.3478)">
+ <stop offset="0" style="stop-color:#007B8F"/>
+ <stop offset="1" style="stop-color:#007E93"/>
+ </linearGradient>
+ <path fill="url(#SVGID_16_)" d="M524.3,234.1c-0.6,0.9-1.6,1.5-2.8,1.5c-0.2,0-0.4,0-0.6-0.1L476.5,486c0.6,0.1,1.1,0.4,1.5,0.7
+ l0,0l0,0l0,0l0,0L628.9,304c-0.7-0.6-1.2-1.5-1.2-2.5l0,0l0,0l0,0l0,0c0-0.6,0.2-1.3,0.5-1.8L524.3,234.1"/>
+
+ <linearGradient id="SVGID_17_" gradientUnits="userSpaceOnUse" x1="0" y1="-1.258313e-07" x2="1" y2="-1.258313e-07" gradientTransform="matrix(238.6146 200.8014 -351.4245 295.7343 209.7595 311.5178)">
+ <stop offset="0" style="stop-color:#006C80"/>
+ <stop offset="1" style="stop-color:#007C91"/>
+ </linearGradient>
+ <path fill="url(#SVGID_17_)" d="M355,292.1L355,292.1L239,479.9c0.9,0.6,1.6,1.6,1.6,2.8l0,0l0,0l0,0l0,0.1l232,6.3
+ c0-1.2,0.7-2.2,1.6-2.7L359.5,292.2c-0.6,0.5-1.4,0.9-2.2,0.9C356.4,293,355.6,292.7,355,292.1"/>
+
+ <linearGradient id="SVGID_18_" gradientUnits="userSpaceOnUse" x1="0" y1="-1.883127e-07" x2="1" y2="-1.883127e-07" gradientTransform="matrix(164.2666 256.8295 -241.9269 378.2508 386.2949 187.0205)">
+ <stop offset="0" style="stop-color:#00788D"/>
+ <stop offset="1" style="stop-color:#007C91"/>
+ </linearGradient>
+ <path fill="url(#SVGID_18_)" d="M518.4,233.4L518.4,233.4l-158.7,54.1c0.5,0.6,0.8,1.3,0.8,2.2l0,0l0,0l0,0l0,0
+ c0,1-0.4,1.8-1.1,2.4l114.7,194.2c0.5-0.3,1.1-0.5,1.7-0.5c0.2,0,0.4,0,0.6,0.1l44.5-250.3C519.7,235.4,518.8,234.6,518.4,233.4"
+ />
+
+ <linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.285095e-08" x2="1" y2="-3.285095e-08" gradientTransform="matrix(238.5896 152.5409 -351.3877 224.6577 261.2702 467.3644)">
+ <stop offset="0" style="stop-color:#005262"/>
+ <stop offset="1" style="stop-color:#005D6F"/>
+ </linearGradient>
+ <path fill="url(#SVGID_19_)" d="M240.6,482.8c0,1.1-0.6,2-1.4,2.6l103.1,147.1l0,0l0,0l0,0c0.5-0.4,1.2-0.6,1.9-0.6
+ c0.9,0,1.6,0.3,2.2,0.9l0,0l0,0l0,0l0,0l127.3-141.1c-0.7-0.6-1.1-1.5-1.1-2.4l0,0l0,0l0,0l0-0.1L240.6,482.8"/>
+
+ <linearGradient id="SVGID_20_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.444904e-08" x2="1" y2="-2.444904e-08" gradientTransform="matrix(243.7687 168.1613 -359.0153 247.6629 14.1512 468.5113)">
+ <stop offset="0" style="stop-color:#00404F"/>
+ <stop offset="1" style="stop-color:#00414F"/>
+ </linearGradient>
+ <path fill="url(#SVGID_20_)" d="M234,482.9L234,482.9L0,499.2v12.2L75.3,648l0,0l0,0l0,0c0.5-0.3,1-0.4,1.6-0.4
+ c0.9,0,1.7,0.4,2.3,0.9l0,0l0,0l0,0l0,0L235,485.1C234.4,484.5,234.1,483.8,234,482.9"/>
+
+ <linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.159039e-08" x2="1" y2="-3.159039e-08" gradientTransform="matrix(267.2933 168.1992 -393.6616 247.7187 50.5552 499.3493)">
+ <stop offset="0" style="stop-color:#005F71"/>
+ <stop offset="1" style="stop-color:#004B5B"/>
+ </linearGradient>
+ <path fill="url(#SVGID_21_)" d="M235,485.1L235,485.1L79.2,648.5c0.6,0.6,1,1.3,1,2.2l0,0l260.7-15.3l0-0.2l0,0l0,0
+ c0-1.1,0.6-2.1,1.4-2.7L239.2,485.4c-0.5,0.4-1.2,0.6-1.9,0.6C236.4,486,235.6,485.6,235,485.1"/>
+
+ <linearGradient id="SVGID_22_" gradientUnits="userSpaceOnUse" x1="0" y1="-7.685594e-08" x2="1" y2="-7.685594e-08" gradientTransform="matrix(146.0392 187.7647 -215.0822 276.5343 -66.7807 496.8497)">
+ <stop offset="0" style="stop-color:#004D5D"/>
+ <stop offset="1" style="stop-color:#003D4B"/>
+ </linearGradient>
+ <path fill="url(#SVGID_22_)" d="M0,511.4V654h64.4l9.3-2.3c-0.1-0.3-0.1-0.5-0.1-0.8l0,0l0,0l0,0l0,0c0-1.2,0.7-2.3,1.7-2.9
+ L0,511.4"/>
+
+ <linearGradient id="SVGID_23_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.447341e-07" x2="1" y2="-2.447341e-07" gradientTransform="matrix(146.0298 179.9296 -215.0684 264.9949 -0.7636 566.6056)">
+ <stop offset="0" style="stop-color:#29316D"/>
+ <stop offset="1" style="stop-color:#37346E"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_23_)" points="75.9,654 64.4,654 75.9,654 75.9,654 "/>
+
+ <linearGradient id="SVGID_24_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.447341e-07" x2="1" y2="-2.447341e-07" gradientTransform="matrix(146.0298 179.9296 -215.0684 264.9949 -0.7636 566.6056)">
+ <stop offset="0" style="stop-color:#002C36"/>
+ <stop offset="1" style="stop-color:#00313D"/>
+ </linearGradient>
+ <path fill="url(#SVGID_24_)" d="M73.7,651.7L73.7,651.7l-9.3,2.3h11.5C74.8,653.6,74,652.8,73.7,651.7"/>
+
+ <linearGradient id="SVGID_25_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.112465e-07" x2="1" y2="-2.112465e-07" gradientTransform="matrix(215.1504 179.944 -316.8671 265.0161 46.8247 627.1171)">
+ <stop offset="0" style="stop-color:#004958"/>
+ <stop offset="1" style="stop-color:#004958"/>
+ </linearGradient>
+ <path fill="url(#SVGID_25_)" d="M79.1,653.3c-0.3,0.3-0.7,0.5-1.2,0.7h1.8L79.1,653.3"/>
+
+ <linearGradient id="SVGID_26_" gradientUnits="userSpaceOnUse" x1="0" y1="-7.196650e-08" x2="1" y2="-7.196650e-08" gradientTransform="matrix(267.266 189.0418 -393.6214 278.4151 137.0652 592.8832)">
+ <stop offset="0" style="stop-color:#002E3A"/>
+ <stop offset="0.3924" style="stop-color:#003947"/>
+ <stop offset="1" style="stop-color:#004656"/>
+ </linearGradient>
+ <path fill="url(#SVGID_26_)" d="M340.9,635.4L340.9,635.4L80.2,650.7l0,0.2l0,0l0,0c0,1-0.4,1.8-1.1,2.4l0.6,0.7h253.4l9.3-15.9
+ C341.6,637.5,341,636.6,340.9,635.4"/>
+
+ <linearGradient id="SVGID_27_" gradientUnits="userSpaceOnUse" x1="0" y1="2.202971e-03" x2="1" y2="2.202971e-03" gradientTransform="matrix(232.0632 189.0403 -341.7758 278.4129 280.2001 597.1274)">
+ <stop offset="0" style="stop-color:#784371"/>
+ <stop offset="1" style="stop-color:#643277"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_27_)" points="363.8,654 333.2,654 363.8,654 "/>
+
+ <linearGradient id="SVGID_28_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.544948e-08" x2="1" y2="-2.544948e-08" gradientTransform="matrix(232.0632 189.0403 -341.7758 278.4129 280.2001 597.1274)">
+ <stop offset="0" style="stop-color:#004453"/>
+ <stop offset="1" style="stop-color:#003B49"/>
+ </linearGradient>
+ <path fill="url(#SVGID_28_)" d="M346.6,637.5c-0.6,0.6-1.4,1-2.4,1c-0.6,0-1.2-0.2-1.7-0.5l0,0l-9.3,15.9h30.6L346.6,637.5"/>
+
+ <linearGradient id="SVGID_29_" gradientUnits="userSpaceOnUse" x1="0" y1="-1.448398e-07" x2="1" y2="-1.448398e-07" gradientTransform="matrix(131.6891 262.0743 -193.9477 385.9752 358.6437 460.4742)">
+ <stop offset="0" style="stop-color:#006274"/>
+ <stop offset="1" style="stop-color:#006577"/>
+ </linearGradient>
+ <path fill="url(#SVGID_29_)" d="M473.7,491.7L473.7,491.7L346.4,632.8c0.7,0.6,1.1,1.5,1.1,2.4l0,0l0,0l0,0l0,0
+ c0,0.9-0.4,1.7-0.9,2.3l17.2,16.5h105.5l6.4-161.5C475,492.5,474.2,492.2,473.7,491.7"/>
+
+ <linearGradient id="SVGID_30_" gradientUnits="userSpaceOnUse" x1="0" y1="8.592451e-08" x2="1" y2="8.592451e-08" gradientTransform="matrix(259.4489 262.0565 -382.1087 385.9489 447.9189 506.7936)">
+ <stop offset="0" style="stop-color:#A3758D"/>
+ <stop offset="1" style="stop-color:#F0CEB1"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_30_)" points="718,654 469.3,654 718,654 "/>
+
+ <linearGradient id="SVGID_31_" gradientUnits="userSpaceOnUse" x1="0" y1="8.592451e-08" x2="1" y2="8.592451e-08" gradientTransform="matrix(259.4489 262.0565 -382.1087 385.9489 447.9189 506.7936)">
+ <stop offset="0" style="stop-color:#005F71"/>
+ <stop offset="1" style="stop-color:#008EA5"/>
+ </linearGradient>
+ <path fill="url(#SVGID_31_)" d="M478.6,491.1c-0.6,0.9-1.6,1.4-2.7,1.4l-0.1,0L469.3,654H718L478.6,491.1"/>
+
+ <linearGradient id="SVGID_32_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.076093e-08" x2="1" y2="-3.076093e-08" gradientTransform="matrix(249.0416 357.2639 -366.781 526.1675 481.8965 292.6493)">
+ <stop offset="0" style="stop-color:#008AA0"/>
+ <stop offset="1" style="stop-color:#008FA6"/>
+ </linearGradient>
+ <path fill="url(#SVGID_32_)" d="M628.9,304L628.9,304L478,486.7c0.7,0.6,1.2,1.5,1.2,2.5l0,0l0,0l0,0l0,0c0,0.7-0.2,1.3-0.6,1.9
+ L718,654h5.7l-91.8-349.3c-0.3,0.1-0.5,0.1-0.8,0.1C630.2,304.8,629.5,304.5,628.9,304"/>
+
+ <linearGradient id="SVGID_33_" gradientUnits="userSpaceOnUse" x1="0" y1="-9.578071e-08" x2="1" y2="-9.578071e-08" gradientTransform="matrix(241.2135 357.2568 -355.2521 526.1572 618.4224 320.1393)">
+ <stop offset="0" style="stop-color:#00859B"/>
+ <stop offset="1" style="stop-color:#007E93"/>
+ </linearGradient>
+ <path fill="url(#SVGID_33_)" d="M633.5,303.7c-0.4,0.5-1,0.8-1.6,1L723.7,654h6.1l140.1-135.1c-0.6-0.6-0.9-1.4-0.9-2.3l0,0l0,0
+ l0,0l0,0c0-0.8,0.3-1.6,0.8-2.2L633.5,303.7"/>
+
+ <linearGradient id="SVGID_34_" gradientUnits="userSpaceOnUse" x1="0" y1="7.661347e-02" x2="1" y2="7.661347e-02" gradientTransform="matrix(147.3448 315.5526 -217.005 464.7365 746.4886 470.3268)">
+ <stop offset="0" style="stop-color:#C6A2A3"/>
+ <stop offset="1" style="stop-color:#73437C"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_34_)" points="868.2,654 868.2,654 729.8,654 868.2,654 "/>
+
+ <linearGradient id="SVGID_35_" gradientUnits="userSpaceOnUse" x1="0" y1="-1.831522e-07" x2="1" y2="-1.831522e-07" gradientTransform="matrix(147.3448 315.5526 -217.005 464.7365 746.4886 470.3268)">
+ <stop offset="0" style="stop-color:#00768B"/>
+ <stop offset="1" style="stop-color:#004453"/>
+ </linearGradient>
+ <path fill="url(#SVGID_35_)" d="M869.8,518.9L869.8,518.9L729.8,654h138.5l3.9-134.1C871.2,519.9,870.4,519.5,869.8,518.9"/>
+
+ <linearGradient id="SVGID_36_" gradientUnits="userSpaceOnUse" x1="0" y1="3.399418e-08" x2="1" y2="3.399418e-08" gradientTransform="matrix(241.1816 226.8411 -355.2051 334.0848 669.052 254.1244)">
+ <stop offset="0" style="stop-color:#00889E"/>
+ <stop offset="1" style="stop-color:#007388"/>
+ </linearGradient>
+ <path fill="url(#SVGID_36_)" d="M795.3,289.8l-160.9,11.4l0,0.2l0,0l0,0c0,0.8-0.3,1.6-0.8,2.2l236.3,210.7
+ c0.4-0.4,0.9-0.7,1.4-0.9l-73.5-220.6C796.3,292.5,795.3,291.3,795.3,289.8"/>
+
+ <linearGradient id="SVGID_37_" gradientUnits="userSpaceOnUse" x1="0" y1="1.357821e-07" x2="1" y2="1.357821e-07" gradientTransform="matrix(172.08 242.4763 -253.4342 357.1119 493.4091 27.6672)">
+ <stop offset="0" style="stop-color:#00677A"/>
+ <stop offset="1" style="stop-color:#00778B"/>
+ </linearGradient>
+ <path fill="url(#SVGID_37_)" d="M531.4,0h-11.2l1.2,229.1l0,0c1.3,0,2.4,0.7,2.9,1.8l0,0l0,0l0,0l0,0l164.7-84.2
+ c-0.1-0.3-0.2-0.7-0.2-1l0,0l0,0l0,0l0,0c0-1,0.5-1.9,1.2-2.5L531.4,0"/>
+
+ <linearGradient id="SVGID_38_" gradientUnits="userSpaceOnUse" x1="0" y1="1.589069e-08" x2="1" y2="1.589069e-08" gradientTransform="matrix(170.7561 156.4178 -251.4845 230.3674 539.3872 128.6895)">
+ <stop offset="0" style="stop-color:#00768B"/>
+ <stop offset="1" style="stop-color:#007C91"/>
+ </linearGradient>
+ <path fill="url(#SVGID_38_)" d="M689.2,146.6L689.2,146.6l-164.7,84.2c0.2,0.5,0.4,1,0.4,1.5l0,0l0,0l0,0l0,0
+ c0,0.6-0.2,1.3-0.5,1.8l103.9,65.6c0.6-0.9,1.6-1.5,2.8-1.5c0.4,0,0.8,0.1,1.2,0.2l0,0l0,0l0,0l0,0l58.7-149.8
+ C690.1,148.2,689.4,147.5,689.2,146.6"/>
+
+ <linearGradient id="SVGID_39_" gradientUnits="userSpaceOnUse" x1="0" y1="2.566339e-07" x2="1" y2="2.566339e-07" gradientTransform="matrix(165.5576 156.4324 -243.8283 230.3889 605.4843 168.9824)">
+ <stop offset="0" style="stop-color:#00768B"/>
+ <stop offset="1" style="stop-color:#007B8F"/>
+ </linearGradient>
+ <path fill="url(#SVGID_39_)" d="M694.5,148.1c-0.6,0.5-1.4,0.9-2.2,0.9c-0.5,0-1-0.1-1.4-0.3l0,0l-58.7,149.8
+ c1.2,0.5,2,1.5,2.1,2.8l160.9-11.4l0-0.1l0,0l0,0c0-0.5,0.1-1,0.3-1.4L694.5,148.1"/>
+
+ <linearGradient id="SVGID_40_" gradientUnits="userSpaceOnUse" x1="0" y1="2.040233e-07" x2="1" y2="2.040233e-07" gradientTransform="matrix(242.5 155.1479 -357.1468 228.4971 558.5871 -34.7268)">
+ <stop offset="0" style="stop-color:#006578"/>
+ <stop offset="1" style="stop-color:#006E82"/>
+ </linearGradient>
+ <path fill="url(#SVGID_40_)" d="M759.2,0H531.4l158.7,143.1c0.6-0.5,1.3-0.8,2.1-0.8c0.4,0,0.8,0.1,1.1,0.2l0,0l0,0l0,0l0,0
+ L759.2,0"/>
+
+ <linearGradient id="SVGID_41_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.133947e-08" x2="1" y2="-2.133947e-08" gradientTransform="matrix(229.4455 152.5291 -337.9205 224.6403 689.7961 -5.8446)">
+ <stop offset="0" style="stop-color:#007185"/>
+ <stop offset="1" style="stop-color:#005D6F"/>
+ </linearGradient>
+ <path fill="url(#SVGID_41_)" d="M918.2,0H759.2l-65.8,142.5c0.5,0.2,1,0.5,1.3,0.9l0,0l0,0l0,0l0,0L918.2,0"/>
+
+ <linearGradient id="SVGID_42_" gradientUnits="userSpaceOnUse" x1="0" y1="2.388506e-07" x2="1" y2="2.388506e-07" gradientTransform="matrix(305.0337 144.6955 -449.2446 213.1032 716.0034 133.7802)">
+ <stop offset="0" style="stop-color:#007084"/>
+ <stop offset="1" style="stop-color:#006679"/>
+ </linearGradient>
+ <path fill="url(#SVGID_42_)" d="M695.6,145.1c0,0.2,0.1,0.4,0.1,0.6l0,0l0,0l0,0l0,0c0,1-0.4,1.8-1.1,2.5l101.1,140.2
+ c0.5-1.1,1.7-1.9,3-1.9c0.7,0,1.4,0.2,1.9,0.6l0,0l0,0l0,0l0,0l194.2-136.2c-0.4-0.5-0.6-1.2-0.6-1.9l0,0l0,0l0,0l0,0L695.6,145.1
+ "/>
+
+ <linearGradient id="SVGID_43_" gradientUnits="userSpaceOnUse" x1="0" y1="-5.711081e-08" x2="1" y2="-5.711081e-08" gradientTransform="matrix(305.0721 151.2323 -449.3012 222.7305 675.4097 6.1933)">
+ <stop offset="0" style="stop-color:#007184"/>
+ <stop offset="1" style="stop-color:#005C6D"/>
+ </linearGradient>
+ <path fill="url(#SVGID_43_)" d="M922.9,0h-4.7L694.8,143.4c0.4,0.5,0.7,1,0.8,1.6l298.5,3.8c0-1.3,0.8-2.4,1.8-2.9L922.9,0"/>
+
+ <linearGradient id="SVGID_44_" gradientUnits="userSpaceOnUse" x1="0" y1="1.812823e-07" x2="1" y2="1.812823e-07" gradientTransform="matrix(255.5573 226.8723 -376.3772 334.1308 805.5223 281.8174)">
+ <stop offset="0" style="stop-color:#00798E"/>
+ <stop offset="1" style="stop-color:#005E70"/>
+ </linearGradient>
+ <path fill="url(#SVGID_44_)" d="M801.8,290.5c-0.3,1.5-1.6,2.6-3.2,2.6c-0.3,0-0.6-0.1-0.9-0.1l73.5,220.6c0.3-0.1,0.7-0.2,1-0.2
+ c0.9,0,1.7,0.3,2.3,0.9l0,0l0,0l0,0l0,0l175.4-186.8c-0.6-0.6-1.1-1.5-1.1-2.4l0,0l0,0l0,0l0,0c0-0.2,0-0.3,0-0.4L801.8,290.5"/>
+
+ <linearGradient id="SVGID_45_" gradientUnits="userSpaceOnUse" x1="0" y1="-5.119455e-08" x2="1" y2="-5.119455e-08" gradientTransform="matrix(255.5278 176.0013 -376.3337 259.2095 795.8801 149.503)">
+ <stop offset="0" style="stop-color:#006E82"/>
+ <stop offset="1" style="stop-color:#005D6F"/>
+ </linearGradient>
+ <path fill="url(#SVGID_45_)" d="M994.7,150.8L994.7,150.8L800.5,287c0.9,0.6,1.4,1.6,1.4,2.7l0,0l0,0l0,0l0,0c0,0.2,0,0.5-0.1,0.7
+ l247.1,34c0.2-1.3,1.1-2.3,2.3-2.7l-52.8-169.7c-0.3,0.1-0.6,0.2-1,0.2C996.3,152.2,995.3,151.7,994.7,150.8"/>
+
+ <linearGradient id="SVGID_46_" gradientUnits="userSpaceOnUse" x1="0" y1="3.842797e-08" x2="1" y2="3.842797e-08" gradientTransform="matrix(273.7466 191.6226 -403.1659 282.2161 849.3698 340.9593)">
+ <stop offset="0" style="stop-color:#005263"/>
+ <stop offset="1" style="stop-color:#00596B"/>
+ </linearGradient>
+ <path fill="url(#SVGID_46_)" d="M1049.9,327.3L1049.9,327.3L874.5,514.2c0.5,0.4,0.8,1,1,1.7l0,0l0,0l0,0l0,0l267.3-61.1
+ c-0.1-0.2-0.1-0.5-0.1-0.7l0,0l0,0l0,0l0,0c0-1.1,0.5-2.1,1.4-2.7l-90-123.7c-0.5,0.4-1.2,0.6-1.9,0.6
+ C1051.3,328.2,1050.5,327.9,1049.9,327.3"/>
+
+ <linearGradient id="SVGID_47_" gradientUnits="userSpaceOnUse" x1="0" y1="2.641536e-08" x2="1" y2="2.641536e-08" gradientTransform="matrix(215.1167 176.0045 -316.8174 259.2142 982.7456 160.9045)">
+ <stop offset="0" style="stop-color:#00596B"/>
+ <stop offset="1" style="stop-color:#005667"/>
+ </linearGradient>
+ <path fill="url(#SVGID_47_)" d="M1000.4,150.3c-0.4,0.9-1.1,1.5-2.1,1.8l52.8,169.7c0.3-0.1,0.6-0.2,1-0.2c1.3,0,2.4,0.7,2.9,1.8
+ l0,0l0,0l0,0l0,0l154.5-79.1c-0.2-0.5-0.4-1-0.4-1.5l0,0l0,0l0,0l0,0c0-0.5,0.1-0.9,0.3-1.3L1000.4,150.3"/>
+
+ <linearGradient id="SVGID_48_" gradientUnits="userSpaceOnUse" x1="0" y1="5.606853e-08" x2="1" y2="5.606853e-08" gradientTransform="matrix(160.3302 211.1666 -236.1295 310.9999 1074.7563 212.951)">
+ <stop offset="0" style="stop-color:#005869"/>
+ <stop offset="1" style="stop-color:#005768"/>
+ </linearGradient>
+ <path fill="url(#SVGID_48_)" d="M1209.6,244.3L1209.6,244.3l-154.5,79.1c0.2,0.5,0.4,1,0.4,1.5l0,0l0,0l0,0l0,0
+ c0,1.1-0.5,2.1-1.4,2.7l90,123.7c0.5-0.4,1.2-0.6,1.9-0.6c0.3,0,0.7,0.1,1,0.2l0,0l0,0l0,0l0,0l64.5-204.9
+ C1210.7,245.7,1210,245.1,1209.6,244.3"/>
+
+ <linearGradient id="SVGID_49_" gradientUnits="userSpaceOnUse" x1="0" y1="2.143497e-08" x2="1" y2="2.143497e-08" gradientTransform="matrix(159.051 220.3248 -234.2456 324.4877 1125.1016 271.8549)">
+ <stop offset="0" style="stop-color:#00596B"/>
+ <stop offset="1" style="stop-color:#005566"/>
+ </linearGradient>
+ <path fill="url(#SVGID_49_)" d="M1213.8,245.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.3,0-0.7-0.1-1-0.2l0,0L1147,450.9
+ c1.3,0.4,2.3,1.7,2.3,3.1l0,0l0,0l0,0l0,0.2l152.5,8.7c0.1-1.3,0.9-2.4,2-2.9L1213.8,245.9"/>
+
+ <linearGradient id="SVGID_50_" gradientUnits="userSpaceOnUse" x1="0" y1="-4.920912e-08" x2="1" y2="-4.920912e-08" gradientTransform="matrix(209.9527 151.2702 -309.212 222.7863 924.9337 -4.5673)">
+ <stop offset="0" style="stop-color:#00596A"/>
+ <stop offset="1" style="stop-color:#00596A"/>
+ </linearGradient>
+ <path fill="url(#SVGID_50_)" d="M932.3,0h-9.4l73,146c0.4-0.2,0.9-0.4,1.5-0.4c1.1,0,2,0.5,2.6,1.3l0,0l0,0l0,0l0,0l129.1-101.5
+ c-0.4-0.6-0.7-1.3-0.7-2l0,0l0,0l0,0l0,0c0-0.2,0-0.5,0.1-0.7L932.3,0"/>
+
+ <linearGradient id="SVGID_51_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.934485e-07" x2="1" y2="-2.934485e-07" gradientTransform="matrix(215.0799 199.4377 -316.7633 293.7259 1002.4696 38.8097)">
+ <stop offset="0" style="stop-color:#00596B"/>
+ <stop offset="1" style="stop-color:#005566"/>
+ </linearGradient>
+ <path fill="url(#SVGID_51_)" d="M1129.1,45.4L1129.1,45.4L1000,146.9c0.4,0.6,0.7,1.3,0.7,2l0,0l0,0l0,0l0,0
+ c0,0.5-0.1,0.9-0.3,1.3l209.1,91.2c0.3-0.8,1-1.4,1.8-1.7l-78.3-193.3c-0.4,0.2-0.8,0.2-1.2,0.2
+ C1130.6,46.6,1129.7,46.1,1129.1,45.4"/>
+
+ <linearGradient id="SVGID_52_" gradientUnits="userSpaceOnUse" x1="0" y1="-1.130411e-07" x2="1" y2="-1.130411e-07" gradientTransform="matrix(340.2659 58.6665 -501.1335 86.4023 943.8505 -19.0889)">
+ <stop offset="0" style="stop-color:#005667"/>
+ <stop offset="1" style="stop-color:#005364"/>
+ </linearGradient>
+ <path fill="url(#SVGID_52_)" d="M1228,0H932.3l196.1,42.6c0.3-1.5,1.6-2.6,3.2-2.6c1.3,0,2.5,0.8,3,2l0,0l0,0l0,0l0,0L1228,0"/>
+
+ <linearGradient id="SVGID_53_" gradientUnits="userSpaceOnUse" x1="0" y1="1.366152e-07" x2="1" y2="1.366152e-07" gradientTransform="matrix(130.3662 258.1252 -191.9995 380.159 1149.2555 -50.2418)">
+ <stop offset="0" style="stop-color:#005364"/>
+ <stop offset="1" style="stop-color:#005263"/>
+ </linearGradient>
+ <path fill="url(#SVGID_53_)" d="M1259.1,0H1228l-93.3,42c0.2,0.4,0.3,0.9,0.3,1.4l0,0l0,0l0,0l0,0c0,1.4-0.9,2.6-2.1,3.1
+ l78.3,193.3c0.4-0.2,0.8-0.2,1.2-0.2c0.2,0,0.4,0,0.6,0.1l0,0l0,0l0,0l0,0L1259.1,0"/>
+
+ <linearGradient id="SVGID_54_" gradientUnits="userSpaceOnUse" x1="0" y1="-9.878477e-08" x2="1" y2="-9.878477e-08" gradientTransform="matrix(168.17 258.1214 -247.6758 380.1535 1193.8403 13.244)">
+ <stop offset="0" style="stop-color:#005364"/>
+ <stop offset="1" style="stop-color:#005162"/>
+ </linearGradient>
+ <path fill="url(#SVGID_54_)" d="M1277.5,0h-18.5l-46,239.6c0.8,0.1,1.4,0.6,1.9,1.1l0,0l0,0l0,0l0,0l163.1-136.6
+ c-0.5-0.6-0.8-1.3-0.8-2.1l0,0l0,0l0,0l0,0c0-0.9,0.4-1.7,1-2.3L1277.5,0"/>
+
+ <linearGradient id="SVGID_55_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.574598e-08" x2="1" y2="-2.574598e-08" gradientTransform="matrix(254.2957 117.3673 -374.5192 172.855 1255.0117 -12.0781)">
+ <stop offset="0" style="stop-color:#005060"/>
+ <stop offset="1" style="stop-color:#004F60"/>
+ </linearGradient>
+ <path fill="url(#SVGID_55_)" d="M1400,0h-122.5l100.8,99.7c0.6-0.6,1.4-1,2.4-1c1,0,2,0.5,2.6,1.2l0,0l0,0l0,0l0,0l16.8-13.5V0"/>
+
+ <linearGradient id="SVGID_56_" gradientUnits="userSpaceOnUse" x1="0" y1="-8.735333e-08" x2="1" y2="-8.735333e-08" gradientTransform="matrix(243.7966 220.3295 -359.0563 324.4947 1220.9749 235.137)">
+ <stop offset="0" style="stop-color:#005566"/>
+ <stop offset="1" style="stop-color:#005364"/>
+ </linearGradient>
+ <path fill="url(#SVGID_56_)" d="M1215.8,242.9c0,1.3-0.9,2.5-2,3l90,214.2c0.4-0.2,0.8-0.3,1.3-0.3c0.7,0,1.4,0.2,1.9,0.6l0,0l0,0
+ l0,0l0,0l93-132.3v-81.3L1215.8,242.9"/>
+
+ <linearGradient id="SVGID_57_" gradientUnits="userSpaceOnUse" x1="0" y1="6.362552e-08" x2="1" y2="6.362552e-08" gradientTransform="matrix(243.8033 146.0212 -359.0663 215.0557 1195.629 111.993)">
+ <stop offset="0" style="stop-color:#005364"/>
+ <stop offset="1" style="stop-color:#005263"/>
+ </linearGradient>
+ <path fill="url(#SVGID_57_)" d="M1378.1,104.1L1378.1,104.1L1215,240.7c0.5,0.6,0.8,1.3,0.8,2.1l0,0l0,0l0,0l0,0.1l184.2,3.9
+ V139.3l-17.8-34.4c-0.5,0.2-1,0.4-1.5,0.4C1379.7,105.3,1378.8,104.8,1378.1,104.1"/>
+
+ <linearGradient id="SVGID_58_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.947152e-07" x2="1" y2="-3.947152e-07" gradientTransform="matrix(135.6225 255.5962 -199.7407 376.4344 1358.3413 34.3443)">
+ <stop offset="0" style="stop-color:#005162"/>
+ <stop offset="1" style="stop-color:#005161"/>
+ </linearGradient>
+ <path fill="url(#SVGID_58_)" d="M1400,86.4L1400,86.4l-16.8,13.5c0.5,0.6,0.7,1.3,0.7,2.1l0,0l0,0l0,0l0,0c0,1.3-0.7,2.4-1.8,2.9
+ l17.8,34.4V86.4"/>
+
+ <linearGradient id="SVGID_59_" gradientUnits="userSpaceOnUse" x1="0" y1="-1.498847e-08" x2="1" y2="-1.498847e-08" gradientTransform="matrix(217.6893 215.0823 -320.6064 316.7668 1255.0277 297.4923)">
+ <stop offset="0" style="stop-color:#005364"/>
+ <stop offset="1" style="stop-color:#005364"/>
+ </linearGradient>
+ <path fill="url(#SVGID_59_)" d="M1400,328.1L1400,328.1l-93,132.3c0.8,0.5,1.3,1.4,1.4,2.4l0,0l0,0l0,0l0,0l91.7-9.3V328.1"/>
+
+ <linearGradient id="SVGID_60_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.599973e-07" x2="1" y2="-2.599973e-07" gradientTransform="matrix(203.3824 174.7003 -299.5356 257.2934 1182.3958 422.7469)">
+ <stop offset="0" style="stop-color:#004858"/>
+ <stop offset="1" style="stop-color:#003B49"/>
+ </linearGradient>
+ <path fill="url(#SVGID_60_)" d="M1149.3,454.2c0,0.7-0.3,1.4-0.8,2l198.4,170.4l0,0l0,0l0,0c0.4-0.5,1-0.9,1.6-1l-42.6-159.2
+ c-0.3,0.1-0.6,0.1-0.9,0.1c-1.8,0-3.3-1.5-3.3-3.3l0,0l0,0l0,0l0-0.2L1149.3,454.2"/>
+
+ <linearGradient id="SVGID_61_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.084324e-07" x2="1" y2="-3.084324e-07" gradientTransform="matrix(217.7274 187.741 -320.6624 276.4994 1282.5363 460.4006)">
+ <stop offset="0" style="stop-color:#005060"/>
+ <stop offset="1" style="stop-color:#004352"/>
+ </linearGradient>
+ <path fill="url(#SVGID_61_)" d="M1400,453.5L1400,453.5l-91.7,9.3c0,0.1,0,0.2,0,0.3l0,0l0,0l0,0l0,0c0,1.5-1,2.8-2.5,3.2
+ l42.6,159.2c0.3-0.1,0.6-0.1,0.9-0.1c0.9,0,1.6,0.3,2.2,0.9l0,0l0,0l0,0l0,0l48.4-52.4V453.5"/>
+
+ <linearGradient id="SVGID_62_" gradientUnits="userSpaceOnUse" x1="0" y1="-9.426913e-09" x2="1" y2="-9.426913e-09" gradientTransform="matrix(409.4068 315.5301 -602.9622 464.7033 830.5627 541.7388)">
+ <stop offset="0" style="stop-color:#492C73"/>
+ <stop offset="1" style="stop-color:#6D4577"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_62_)" points="1084.2,654 868.2,654 1084.2,654 "/>
+
+ <linearGradient id="SVGID_63_" gradientUnits="userSpaceOnUse" x1="0" y1="-0.1595" x2="1" y2="-0.1595" gradientTransform="matrix(147.3448 315.5526 -217.005 464.7365 746.4886 470.3268)">
+ <stop offset="0" style="stop-color:#004251"/>
+ <stop offset="0.4107" style="stop-color:#003A48"/>
+ <stop offset="1" style="stop-color:#002832"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_63_)" points="872.1,519.9 868.2,654 872.1,519.9 872.1,519.9 "/>
+
+ <linearGradient id="SVGID_64_" gradientUnits="userSpaceOnUse" x1="0" y1="-9.426913e-09" x2="1" y2="-9.426913e-09" gradientTransform="matrix(409.4068 315.5301 -602.9622 464.7033 830.5627 541.7388)">
+ <stop offset="0" style="stop-color:#00323F"/>
+ <stop offset="0.1813" style="stop-color:#003643"/>
+ <stop offset="1" style="stop-color:#004352"/>
+ </linearGradient>
+ <path fill="url(#SVGID_64_)" d="M875,518.4c-0.6,0.9-1.6,1.5-2.8,1.5l-0.1,0L868.2,654h216L875,518.4"/>
+
+ <linearGradient id="SVGID_65_" gradientUnits="userSpaceOnUse" x1="0" y1="4.229150e-10" x2="1" y2="4.229150e-10" gradientTransform="matrix(400.2312 322.0101 -589.4485 474.2469 920.6639 414.9731)">
+ <stop offset="0" style="stop-color:#004150"/>
+ <stop offset="1" style="stop-color:#004B5A"/>
+ </linearGradient>
+ <path fill="url(#SVGID_65_)" d="M1142.8,454.7L1142.8,454.7l-267.3,61.1c0.1,0.2,0.1,0.5,0.1,0.7l0,0l0,0l0,0l0,0
+ c0,0.7-0.2,1.3-0.5,1.8L1084.2,654h140.3l-77.3-196.9c-0.4,0.1-0.8,0.2-1.2,0.2C1144.4,457.3,1143.1,456.2,1142.8,454.7"/>
+
+ <linearGradient id="SVGID_66_" gradientUnits="userSpaceOnUse" x1="0" y1="-3.471723e-08" x2="1" y2="-3.471723e-08" gradientTransform="matrix(203.3923 322.0378 -299.5501 474.2878 1157.0344 436.5399)">
+ <stop offset="0" style="stop-color:#004554"/>
+ <stop offset="1" style="stop-color:#003845"/>
+ </linearGradient>
+ <path fill="url(#SVGID_66_)" d="M1148.5,456.2c-0.3,0.4-0.8,0.7-1.3,0.9l77.3,196.9h111.6l11.7-22.4c-1.1-0.6-1.8-1.6-1.8-2.9l0,0
+ l0,0l0,0l0,0c0-0.8,0.3-1.6,0.8-2.1L1148.5,456.2"/>
+
+ <linearGradient id="SVGID_67_" gradientUnits="userSpaceOnUse" x1="0" y1="5.641503e-03" x2="1" y2="5.641503e-03" gradientTransform="matrix(173.4008 147.3255 -255.3795 216.9766 1300.0072 605.2713)">
+ <stop offset="0" style="stop-color:#553B71"/>
+ <stop offset="1" style="stop-color:#232171"/>
+ </linearGradient>
+ <polyline fill="url(#SVGID_67_)" points="1372.8,654 1336.2,654 1372.8,654 "/>
+
+ <linearGradient id="SVGID_68_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.082379e-08" x2="1" y2="-2.082379e-08" gradientTransform="matrix(173.4008 147.3255 -255.3795 216.9766 1300.0072 605.2713)">
+ <stop offset="0" style="stop-color:#003B49"/>
+ <stop offset="0.4852" style="stop-color:#00313D"/>
+ <stop offset="1" style="stop-color:#00222B"/>
+ </linearGradient>
+ <path fill="url(#SVGID_68_)" d="M1351.6,631.1c-0.6,0.5-1.4,0.9-2.2,0.9c-0.6,0-1.1-0.1-1.5-0.4l0,0l-11.7,22.4h36.6L1351.6,631.1
+ "/>
+
+ <linearGradient id="SVGID_69_" gradientUnits="userSpaceOnUse" x1="0" y1="-2.871093e-07" x2="1" y2="-2.871093e-07" gradientTransform="matrix(173.332 291.9276 -255.2782 429.9422 1314.6273 499.47)">
+ <stop offset="0" style="stop-color:#00252E"/>
+ <stop offset="1" style="stop-color:#003644"/>
+ </linearGradient>
+ <path fill="url(#SVGID_69_)" d="M1400,573.9L1400,573.9l-48.4,52.4c0.7,0.6,1.1,1.5,1.1,2.4l0,0l0,0l0,0l0,0c0,1-0.4,1.8-1.1,2.4
+ l21.2,22.9h27.2V573.9"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="64.4" y1="654" x2="0" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="75.9" y1="654" x2="64.4" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="79.8" y1="654" x2="75.9" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="333.2" y1="654" x2="79.8" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="363.8" y1="654" x2="333.2" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="469.3" y1="654" x2="363.8" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="718" y1="654" x2="469.3" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="723.7" y1="654" x2="718" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="729.8" y1="654" x2="723.7" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="868.2" y1="654" x2="729.8" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="1084.2" y1="654" x2="868.2" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="1224.5" y1="654" x2="1084.2" y2="654"/>
+
+ <line opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" x1="1336.2" y1="654" x2="1224.5" y2="654"/>
+ <path opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" d="M1336.2,654"/>
+ <path opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" d="M1372.8,654"/>
+ <path opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" d="M1372.8,654"/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="0,1.1 0,18.5 22.2,2.9
+ "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="22.2,2.9 0,18.5
+ 0,159.3 53.5,178.9 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="0,159.3 0,247.9
+ 53.5,178.9 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="53.5,178.9 0,247.9
+ 0,292.7 159.1,218 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="0,292.7 0,488.6
+ 159.1,218 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="159.1,218 0,488.6
+ 0,499.2 237.3,482.7 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="159.1,218 237.3,482.7
+ 357.2,288.4 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="22.2,2.9 53.5,178.9
+ 275.1,82.4 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="53.5,178.9 159.1,218
+ 275.1,82.4 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="275.1,82.4 159.1,218
+ 357.2,288.4 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="99,0 22.2,2.9
+ 275.1,82.4 325.8,0 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="0,0 0,1.1 22.2,2.9
+ 99,0 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="325.8,0 275.1,82.4
+ 521.5,232.4 338.1,0 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="521.5,232.4 275.1,82.4
+ 357.2,288.4 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="338.1,0 521.5,232.4
+ 520.3,0 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="631,301.5 521.5,232.4
+ 475.9,489.2 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="357.2,288.4
+ 237.3,482.7 475.9,489.2 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="475.9,489.2
+ 521.5,232.4 357.2,288.4 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="475.9,489.2
+ 237.3,482.7 344.2,635.2 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="237.3,482.7 0,499.2
+ 0,511.4 76.9,650.9 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="237.3,482.7 76.9,650.9
+ 344.2,635.2 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="76.9,650.9 0,511.4
+ 0,654 64.4,654 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="64.4,654 75.9,654
+ 76.9,650.9 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="76.9,650.9 75.9,654
+ 79.8,654 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="333.2,654 344.2,635.2
+ 76.9,650.9 79.8,654 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="333.2,654 363.8,654
+ 344.2,635.2 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="344.2,635.2 363.8,654
+ 469.3,654 475.9,489.2 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="469.3,654 718,654
+ 475.9,489.2 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="631,301.5 475.9,489.2
+ 718,654 723.7,654 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="729.8,654 872.2,516.6
+ 631,301.5 723.7,654 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="729.8,654 868.2,654
+ 872.2,516.6 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="796.6,289.7 631,301.5
+ 872.2,516.6 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="520.3,0 521.5,232.4
+ 692.3,145 531.4,0 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="692.3,145 521.5,232.4
+ 631,301.5 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="796.6,289.7 692.3,145
+ 631,301.5 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="531.4,0 692.3,145
+ 759.2,0 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="759.2,0 692.3,145
+ 918.2,0 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="997.4,148.9 692.3,145
+ 796.6,289.7 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="918.2,0 692.3,145
+ 997.4,148.9 922.9,0 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="872.2,516.6
+ 1052.1,324.9 796.6,289.7 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1052.1,324.9
+ 997.4,148.9 796.6,289.7 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1146,454 1052.1,324.9
+ 872.2,516.6 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1052.1,324.9
+ 1212.5,242.8 997.4,148.9 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1146,454 1212.5,242.8
+ 1052.1,324.9 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1305.1,463.1
+ 1212.5,242.8 1146,454 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="922.9,0 997.4,148.9
+ 1131.7,43.3 932.3,0 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="997.4,148.9
+ 1212.5,242.8 1131.7,43.3 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="932.3,0 1131.7,43.3
+ 1228,0 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1228,0 1131.7,43.3
+ 1212.5,242.8 1259.1,0 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1259.1,0 1212.5,242.8
+ 1380.7,102 1277.5,0 "/>
+ <path opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" d="M1400,0"/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1277.5,0 1380.7,102
+ 1400,86.4 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1400,246.8
+ 1212.5,242.8 1305.1,463.1 1400,328.1 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1400,139.3 1380.7,102
+ 1212.5,242.8 1400,246.8 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1400,86.4 1380.7,102
+ 1400,139.3 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1400,328.1
+ 1305.1,463.1 1400,453.5 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1349.4,628.7
+ 1305.1,463.1 1146,454 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1400,453.5
+ 1305.1,463.1 1349.4,628.7 1400,573.9 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="868.2,654 1084.2,654
+ 872.2,516.6 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1084.2,654 1224.5,654
+ 1146,454 872.2,516.6 "/>
+ <polygon opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1224.5,654 1336.2,654
+ 1349.4,628.7 1146,454 "/>
+ <polyline opacity="0.35" fill="none" stroke="#26C6DA" stroke-width="0.6" stroke-miterlimit="10" points="1372.8,654
+ 1349.4,628.7 1336.2,654 "/>
+ <path fill="#80DEEA" d="M359.5,292.2c0.7-0.6,1.1-1.5,1.1-2.4c0-0.8-0.3-1.6-0.8-2.2c-0.6-0.7-1.5-1.2-2.5-1.2
+ c-0.3,0-0.5,0-0.8,0.1c-0.7,0.2-1.3,0.5-1.7,1c-0.5,0.6-0.8,1.3-0.8,2.2c0,0.9,0.4,1.8,1,2.4c0.6,0.6,1.4,0.9,2.3,0.9
+ C358.1,293,358.9,292.7,359.5,292.2z"/>
+ <path fill="#80DEEA" d="M634.3,301.2c-0.1-1.3-0.9-2.4-2.1-2.8c-0.4-0.1-0.8-0.2-1.2-0.2c-1.2,0-2.2,0.6-2.8,1.5
+ c-0.3,0.5-0.5,1.1-0.5,1.8c0,1,0.5,1.9,1.2,2.5c0.6,0.5,1.3,0.8,2.1,0.8c0.3,0,0.6,0,0.8-0.1c0.6-0.2,1.2-0.5,1.6-1
+ c0.5-0.6,0.8-1.3,0.8-2.2C634.3,301.4,634.3,301.3,634.3,301.2z"/>
+ <path fill="#80DEEA" d="M475.9,485.9c-0.6,0-1.2,0.2-1.7,0.5c-0.9,0.6-1.6,1.6-1.6,2.7c0,0,0,0.1,0,0.1c0,1,0.4,1.8,1.1,2.4
+ c0.6,0.5,1.3,0.8,2.1,0.8c0,0,0.1,0,0.1,0c1.1,0,2.1-0.6,2.7-1.4c0.4-0.5,0.6-1.2,0.6-1.9c0-1-0.5-1.9-1.2-2.5
+ c-0.4-0.4-0.9-0.6-1.5-0.7C476.3,485.9,476.1,485.9,475.9,485.9z"/>
+ <path fill="#80DEEA" d="M342.3,632.5c-0.9,0.6-1.4,1.6-1.4,2.7c0,0.1,0,0.1,0,0.2c0.1,1.1,0.7,2.1,1.6,2.7
+ c0.5,0.3,1.1,0.5,1.7,0.5c0.9,0,1.8-0.4,2.4-1c0.6-0.6,0.9-1.4,0.9-2.3c0-1-0.4-1.8-1.1-2.4c-0.6-0.5-1.4-0.9-2.2-0.9
+ C343.5,631.9,342.8,632.1,342.3,632.5z"/>
+ <path fill="#80DEEA" d="M161.9,219c0.3-0.5,0.5-1.1,0.5-1.7c0-0.9-0.3-1.6-0.9-2.2c-0.6-0.7-1.5-1.1-2.4-1.1c-1.6,0-3,1.2-3.3,2.8
+ c0,0.2-0.1,0.4-0.1,0.6c0,0.7,0.2,1.4,0.6,1.9c0.3,0.5,0.8,0.8,1.3,1.1c0.4,0.2,0.9,0.3,1.4,0.3c0.3,0,0.5,0,0.8-0.1
+ C160.7,220.4,161.5,219.8,161.9,219z"/>
+ <path fill="#80DEEA" d="M56.5,177.6c-0.5-1.2-1.7-2-3-2c-0.2,0-0.4,0-0.6,0.1c-1.2,0.2-2.1,1-2.5,2.1c-0.1,0.4-0.2,0.7-0.2,1.1
+ c0,1.1,0.5,2,1.3,2.6c0.6,0.4,1.3,0.7,2,0.7c1.4,0,2.6-0.9,3.1-2.2c0.1-0.4,0.2-0.7,0.2-1.1C56.8,178.5,56.7,178,56.5,177.6z"/>
+ <path fill="#80DEEA" d="M272.1,83.8c0.2,0.5,0.5,0.9,0.9,1.2c0.6,0.5,1.3,0.8,2.1,0.8c0.4,0,0.8-0.1,1.2-0.2
+ c0.7-0.3,1.2-0.7,1.6-1.4c0.3-0.5,0.5-1.1,0.5-1.7c0-1.2-0.6-2.2-1.6-2.8c-0.5-0.3-1.1-0.5-1.7-0.5c-1.5,0-2.7,1-3.1,2.3
+ c-0.1,0.3-0.2,0.6-0.2,1C271.8,82.9,271.9,83.4,272.1,83.8z"/>
+ <path fill="#80DEEA" d="M518.4,233.4c0.4,1.1,1.3,2,2.5,2.2c0.2,0,0.4,0.1,0.6,0.1c1.2,0,2.2-0.6,2.8-1.5c0.3-0.5,0.5-1.1,0.5-1.8
+ c0-0.5-0.1-1-0.4-1.5c-0.5-1.1-1.6-1.8-2.9-1.8c0,0,0,0,0,0c-0.8,0-1.5,0.3-2,0.7c-0.3,0.2-0.6,0.5-0.8,0.9
+ c-0.3,0.5-0.5,1.1-0.5,1.7C518.2,232.7,518.3,233.1,518.4,233.4z"/>
+ <path fill="#80DEEA" d="M239.2,485.4c0.8-0.6,1.4-1.5,1.4-2.6c0,0,0-0.1,0-0.1c0-1.2-0.6-2.2-1.6-2.8c-0.5-0.3-1.1-0.5-1.7-0.5
+ c-0.3,0-0.6,0.1-0.9,0.2c-1.4,0.4-2.4,1.7-2.4,3.2c0,0.1,0,0.2,0,0.2c0.1,0.8,0.4,1.6,1,2.2c0.6,0.6,1.4,0.9,2.3,0.9
+ C238,486,238.7,485.8,239.2,485.4z"/>
+ <path fill="#80DEEA" d="M80.2,650.9c0-0.1,0-0.1,0-0.2c-0.1-0.9-0.4-1.6-1-2.2c-0.6-0.6-1.4-0.9-2.3-0.9c-0.6,0-1.1,0.2-1.6,0.4
+ c-1,0.6-1.7,1.6-1.7,2.9c0,0.3,0,0.5,0.1,0.8c0.3,1.1,1.1,2,2.2,2.3H78c0.4-0.1,0.8-0.4,1.2-0.7C79.8,652.7,80.2,651.8,80.2,650.9
+ z"/>
+ <path fill="#80DEEA" d="M874.5,514.2c-0.6-0.6-1.4-0.9-2.3-0.9c-0.4,0-0.7,0.1-1,0.2c-0.6,0.2-1,0.5-1.4,0.9
+ c-0.5,0.6-0.8,1.3-0.8,2.2c0,0.9,0.4,1.7,0.9,2.3c0.6,0.6,1.4,1,2.3,1c0,0,0.1,0,0.1,0c1.2,0,2.2-0.6,2.8-1.5
+ c0.3-0.5,0.5-1.1,0.5-1.8c0-0.3,0-0.5-0.1-0.7C875.3,515.2,874.9,514.6,874.5,514.2z"/>
+ <path fill="#80DEEA" d="M801.8,290.5c0.1-0.2,0.1-0.5,0.1-0.7c0-1.1-0.6-2.1-1.4-2.7c-0.5-0.4-1.2-0.6-1.9-0.6
+ c-1.3,0-2.4,0.8-3,1.9c-0.2,0.4-0.3,0.9-0.3,1.4c0,0,0,0.1,0,0.1c0,1.5,1,2.7,2.4,3.1c0.3,0.1,0.6,0.1,0.9,0.1
+ C800.1,293,801.5,291.9,801.8,290.5z"/>
+ <path fill="#80DEEA" d="M690.9,148.6c0.4,0.2,0.9,0.3,1.4,0.3c0.8,0,1.6-0.3,2.2-0.9c0.7-0.6,1.1-1.5,1.1-2.5c0-0.2,0-0.4-0.1-0.6
+ c-0.1-0.6-0.4-1.2-0.8-1.6c-0.4-0.4-0.8-0.7-1.3-0.9c-0.4-0.1-0.7-0.2-1.1-0.2c-0.8,0-1.5,0.3-2.1,0.8c-0.7,0.6-1.2,1.5-1.2,2.5
+ c0,0.4,0.1,0.7,0.2,1C689.4,147.5,690.1,148.2,690.9,148.6z"/>
+ <path fill="#80DEEA" d="M1149.3,454c0-1.5-1-2.7-2.3-3.1c-0.3-0.1-0.6-0.2-1-0.2c-0.7,0-1.4,0.2-1.9,0.6c-0.8,0.6-1.4,1.6-1.4,2.7
+ c0,0.3,0,0.5,0.1,0.7c0.3,1.5,1.6,2.6,3.2,2.6c0.4,0,0.8-0.1,1.2-0.2c0.5-0.2,0.9-0.5,1.3-0.9c0.5-0.5,0.7-1.2,0.8-2
+ C1149.3,454.1,1149.3,454.1,1149.3,454z"/>
+ <path fill="#80DEEA" d="M1055.4,324.9c0-0.5-0.1-1-0.4-1.5c-0.5-1.1-1.6-1.8-2.9-1.8c-0.3,0-0.7,0.1-1,0.2
+ c-1.2,0.4-2.1,1.4-2.3,2.7c0,0.1,0,0.3,0,0.4c0,1,0.4,1.8,1.1,2.4c0.6,0.6,1.4,0.9,2.3,0.9c0.7,0,1.4-0.2,1.9-0.6
+ C1054.9,327,1055.4,326,1055.4,324.9z"/>
+ <path fill="#80DEEA" d="M994.7,150.8c0.6,0.9,1.6,1.4,2.7,1.4c0.3,0,0.7-0.1,1-0.2c0.9-0.3,1.7-0.9,2.1-1.8
+ c0.2-0.4,0.3-0.9,0.3-1.3c0-0.8-0.3-1.5-0.7-2c-0.6-0.8-1.5-1.3-2.6-1.3c-0.5,0-1,0.1-1.5,0.4c-1.1,0.5-1.8,1.6-1.8,2.9
+ c0,0,0,0,0,0C994.1,149.6,994.3,150.3,994.7,150.8z"/>
+ <path fill="#80DEEA" d="M1346.9,626.6c-0.5,0.6-0.8,1.3-0.8,2.1c0,1.3,0.7,2.4,1.8,2.9c0.5,0.2,1,0.4,1.5,0.4
+ c0.9,0,1.7-0.3,2.2-0.9c0.7-0.6,1.1-1.5,1.1-2.4c0-1-0.4-1.8-1.1-2.4c-0.6-0.5-1.4-0.9-2.2-0.9c-0.3,0-0.6,0.1-0.9,0.1
+ C1347.9,625.7,1347.3,626.1,1346.9,626.6z"/>
+ <path fill="#80DEEA" d="M1301.8,462.9c0,0.1,0,0.1,0,0.2c0,1.8,1.5,3.3,3.3,3.3c0.3,0,0.6-0.1,0.9-0.1c1.4-0.4,2.5-1.7,2.5-3.2
+ c0-0.1,0-0.2,0-0.3c-0.1-1-0.6-1.8-1.4-2.4c-0.5-0.4-1.2-0.6-1.9-0.6c-0.5,0-0.9,0.1-1.3,0.3
+ C1302.6,460.6,1301.8,461.7,1301.8,462.9z"/>
+ <path fill="#80DEEA" d="M1213.1,239.6c-0.2,0-0.4-0.1-0.6-0.1c-0.4,0-0.9,0.1-1.2,0.2c-0.8,0.3-1.4,1-1.8,1.7
+ c-0.2,0.4-0.3,0.9-0.3,1.3c0,0.5,0.1,1,0.4,1.5c0.4,0.8,1.1,1.4,1.9,1.6c0.3,0.1,0.6,0.2,1,0.2c0.5,0,0.9-0.1,1.3-0.3
+ c1.2-0.5,2-1.6,2-3c0,0,0,0,0-0.1c0-0.8-0.3-1.5-0.8-2.1C1214.5,240.1,1213.9,239.7,1213.1,239.6z"/>
+ <path fill="#80DEEA" d="M1131.7,46.6c0.4,0,0.9-0.1,1.2-0.2c1.2-0.5,2.1-1.7,2.1-3.1c0-0.5-0.1-0.9-0.3-1.4c-0.5-1.1-1.7-2-3-2
+ c-1.6,0-2.9,1.1-3.2,2.6c0,0.2-0.1,0.5-0.1,0.7c0,0.8,0.3,1.5,0.7,2C1129.7,46.1,1130.6,46.6,1131.7,46.6z"/>
+ <path fill="#80DEEA" d="M1378.1,104.1c0.6,0.7,1.5,1.2,2.5,1.2c0.5,0,1.1-0.1,1.5-0.4c1.1-0.6,1.8-1.6,1.8-2.9
+ c0-0.8-0.3-1.5-0.7-2.1c-0.6-0.8-1.5-1.2-2.6-1.2c-0.9,0-1.8,0.4-2.4,1c-0.6,0.6-1,1.4-1,2.3
+ C1377.4,102.8,1377.7,103.5,1378.1,104.1z"/>
+ </g>
+</g>
+</svg>
diff --git a/public/images/github-grey.svg b/public/images/github-grey.svg
new file mode 100644
index 0000000..a7fa471
--- /dev/null
+++ b/public/images/github-grey.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="31px" height="30px" viewBox="0 0 31 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+ <!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
+ <title>github-grey</title>
+ <desc>Created with Sketch.</desc>
+ <defs></defs>
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+ <g id="github-grey" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">
+ <path d="M0.5,0 L32.5,0 L32.5,32 L0.5,32 L0.5,0 Z" id="Shape" sketch:type="MSShapeGroup"></path>
+ <path d="M16.4986187,1.5 C8.21659658,1.5 1.5,8.15610973 1.5,16.3674109 C1.5,22.9359042 5.79755364,28.5077607 11.7581417,30.4736541 C12.5086252,30.6105548 12.7821142,30.1514812 12.7821142,29.7572074 C12.7821142,29.4049163 12.7692225,28.4694285 12.7618558,27.2291086 C8.5895362,28.1271769 7.70921452,25.2358351 7.70921452,25.2358351 C7.02687314,23.5181883 6.04341754,23.0609401 6.04341754,23.0609401 C4.68149728,22.1391424 6.14655146,22.1573958 6.14655146,22.1573958 C7.65212253,22.262353 8.44404371,23.6897704 8.44404371,23.6897704 C9.78202216,25.9614086 11.9552012,25.3051981 12.8097394,24.9246143 C12.9460235,23.9644844 13.3336966,23.3091866 13.7618865,22.9377295 C10.4312134,22.5626217 6.92926425,21.2867076 6.92926425,15.5898152 C6.92926425,13.9670861 7.51399675,12.6391498 8.47351054,11.6005301 C8.31880966,11.2245097 7.8040609,9.71221381 8.62084472,7.66600539 C8.62084472,7.66600539 9.87963105,7.26625548 12.7452807,9.19016599 C13.94145,8.85977908 15.225099,8.6954983 16.5004604,8.6891096 C17.774901,8.6954983 19.0576291,8.85977908 20.2556401,9.19016599 C23.1194481,7.26625548 24.3763928,7.66600539 24.3763928,7.66600539 C25.1950183,9.71221381 24.6802695,11.2245097 24.5264895,11.6005301 C25.4878449,12.6391498 26.0679732,13.9670861 26.0679732,15.5898152 C26.0679732,21.3013104 22.5604991,22.5580584 19.2196967,22.9258648 C19.7574665,23.3849383 20.2372234,24.2921333 20.2372234,25.6793932 C20.2372234,27.6662781 20.2188066,29.269841 20.2188066,29.7572074 C20.2188066,30.1551319 20.4895331,30.6178561 21.2501458,30.4727414 C27.2061297,28.5022847 31.5,22.9340788 31.5,16.3674109 C31.5,8.15610973 24.7834034,1.5 16.4986187,1.5" id="github" fill="#90A4AE" sketch:type="MSShapeGroup"></path>
+ </g>
+ </g>
+</svg>
\ No newline at end of file
diff --git a/public/images/go.png b/public/images/go.png
new file mode 100644
index 0000000..e433a67
--- /dev/null
+++ b/public/images/go.png
Binary files differ
diff --git a/public/images/ios-icon.svg b/public/images/ios-icon.svg
new file mode 100644
index 0000000..6987fae
--- /dev/null
+++ b/public/images/ios-icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg fill="#fafafa" width="170px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170 170" version="1.1" height="170px">
+ <path d="m150.37 130.25c-2.45 5.66-5.35 10.87-8.71 15.66-4.58 6.53-8.33 11.05-11.22 13.56-4.48 4.12-9.28 6.23-14.42 6.35-3.69 0-8.14-1.05-13.32-3.18-5.197-2.12-9.973-3.17-14.34-3.17-4.58 0-9.492 1.05-14.746 3.17-5.262 2.13-9.501 3.24-12.742 3.35-4.929 0.21-9.842-1.96-14.746-6.52-3.13-2.73-7.045-7.41-11.735-14.04-5.032-7.08-9.169-15.29-12.41-24.65-3.471-10.11-5.211-19.9-5.211-29.378 0-10.857 2.346-20.221 7.045-28.068 3.693-6.303 8.606-11.275 14.755-14.925s12.793-5.51 19.948-5.629c3.915 0 9.049 1.211 15.429 3.591 6.362 2.388 10.447 3.599 12.238 3.599 1.339 0 5.877-1.416 13.57-4.239 7.275-2.618 13.415-3.702 18.445-3.275 13.63 1.1 23.87 6.473 30.68 16.153-12.19 7.386-18.22 17.731-18.1 31.002 0.11 10.337 3.86 18.939 11.23 25.769 3.34 3.17 7.07 5.62 11.22 7.36-0.9 2.61-1.85 5.11-2.86 7.51zm-31.26-123.01c0 8.1021-2.96 15.667-8.86 22.669-7.12 8.324-15.732 13.134-25.071 12.375-0.119-0.972-0.188-1.995-0.188-3.07 0-7.778 3.386-16.102 9.399-22.908 3.002-3.446 6.82-6.3113 11.45-8.597 4.62-2.2516 8.99-3.4968 13.1-3.71 0.12 1.0831 0.17 2.1663 0.17 3.2409z"/>
+</svg>
diff --git a/stylesheets/button.less b/stylesheets/button.less
index 3a8b7e4..48622e6 100644
--- a/stylesheets/button.less
+++ b/stylesheets/button.less
@@ -6,17 +6,26 @@
.button,
.button-passive,
-.button-primary {
+.button-secondary,
+.button-disabled {
display: inline-block;
- font-size: 14px;
- line-height: 14px;
+ font-size: @button-font-size;
+ line-height: @button-font-size;
font-weight: 500;
font-family: inherit;
text-transform: uppercase;
- padding: 10px;
+ padding: @gutter-half;
border-radius: 4px;
text-decoration: none;
outline: 0;
+ box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 2px 0px;
+}
+
+.buttons {
+ justify-content: center;
+ display: flex;
+ flex-direction: row;
+ padding: @gutter-half;
}
.button-passive {
@@ -31,3 +40,42 @@
border: 1px solid @color-primary-700;
}
}
+
+.button-secondary {
+ background-color: @color-primary-700;
+
+ &, &:hover, &:active {
+ color: @color-white;
+ }
+}
+
+.button-disabled {
+ &, &:hover, &:active {
+ background-color: rgba(0,0,0,.12);
+ color: rgba(0,0,0,.26);
+ box-shadow: none;
+ cursor: default;
+ }
+}
+
+.build-android, .build-core, .build-ios {
+ background-repeat: no-repeat;
+ padding-left: (@icon-size-half + @gutter-half);
+ margin: 0px @gutter-quarter;
+ background-position-y: center;
+ background-position-x: @gutter-quarter;
+ background-size: @icon-size-half;
+ text-transform: none;
+}
+
+.build-android {
+ background-image: url(/images/android-icon-green.svg);
+}
+
+.build-ios {
+ background-image: url(/images/ios-icon.svg);
+}
+
+.build-core {
+ background-image: url(/images/go.png);
+}
diff --git a/stylesheets/code.less b/stylesheets/code.less
index 9a445f4..9e65d7a 100644
--- a/stylesheets/code.less
+++ b/stylesheets/code.less
@@ -31,7 +31,7 @@
pre {
margin: 0 -@gutter-half;
- width: @pre-width;
+ width: inherit;
@media @small-screen {
width: auto;
diff --git a/stylesheets/constants.less b/stylesheets/constants.less
index 89d982b..b010d8c 100644
--- a/stylesheets/constants.less
+++ b/stylesheets/constants.less
@@ -18,14 +18,19 @@
@color-white-text-secondary: rgba(255, 255, 255, 0.7);
@header-height: 64px;
-@main-max-width: 40em;
-@pre-width: 48em;
-@sidebar-width: 16em;
+@main-max-width: 800px;
+@sidebar-width: 200px;
@icon-size: 48px;
+@icon-size-half: 24px;
@code-font-size: 12px;
+@button-font-size: 16px;
+@intro-heading-font-size: 32px;
+@intro-subheading-font-size: 38px;
+@intro-text-font-size: 22px;
@gutter: 32px;
@gutter-half: 16px;
@gutter-quarter: 8px;
-@small-screen: ~"(max-width: 800px)";
+@small-screen-width: 800px;
+@small-screen: ~"(max-width: @{small-screen-width})";
diff --git a/stylesheets/header.less b/stylesheets/header.less
index 733e5f3..d1fe3c8 100644
--- a/stylesheets/header.less
+++ b/stylesheets/header.less
@@ -65,3 +65,15 @@
display: none;
}
}
+
+&::after {
+ position: absolute;
+ top: 0;
+ right: 0;
+ background: @color-accent-A200;
+ font-size: @code-font-size;
+ font-weight: 500;
+ padding: 1px @gutter-quarter;
+ border-bottom-left-radius: 4px;
+ content: "Developer Preview";
+}
\ No newline at end of file
diff --git a/stylesheets/home.less b/stylesheets/home.less
index 96c6eac..de7b16c 100644
--- a/stylesheets/home.less
+++ b/stylesheets/home.less
@@ -4,6 +4,120 @@
@import "constants";
+.not-scrolled header {
+ background-color: transparent;
+ box-shadow: none;
+}
+
+.home-layout {
+ background-image: url(/images/background.svg);
+ background-repeat: no-repeat;
+ background-size: 100%;
+ background-color: @color-blue-grey-50;
+
+ @media @small-screen {
+ background-size: cover;
+ }
+
+ header {
+ transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+ opacity: 0.99;
+ }
+
+ main {
+ width: 100%;
+ max-width: 100%;
+ margin-left: 0px;
+ padding: 0px;
+ display: flex;
+ flex-direction: column;
+ }
+
+ section {
+ max-width: 100%;
+ width: 100%;
+ padding: @gutter;
+ }
+
+ .menu {
+ display: none !important;
+ }
+
+ .v-icon {
+ display: block !important;
+ }
+
+ .section-container {
+ max-width: @main-max-width;
+ margin: auto;
+ }
+
+ h1, h2, h3 {
+ font-weight: 100;
+ margin: @gutter-half 0px;
+ }
+
+ h1 {
+ color: @color-white;
+ font-size: @intro-heading-font-size;
+ }
+
+ h2 {
+ color: @color-primary-700;
+ font-size: @intro-subheading-font-size;
+ }
+
+ h3 {
+ color: @color-blue-grey-500;
+ font-size: @intro-text-font-size;
+ }
+
+ .intro {
+ text-align: center;
+ }
+
+ .mobile {
+ background: @color-white;
+ }
+
+ .core {
+ background: @color-blue-grey-50;
+ flex: 1;
+ }
+
+ footer {
+ align-items: center;
+ background-color: @color-blue-grey-100;
+ padding: @gutter-half;
+ display: flex;
+ }
+
+ footer .main {
+ flex: 1;
+ }
+
+ footer .main a {
+ display: inline-block;
+ margin-right: @gutter-half;
+ color: @color-blue-grey-500;
+ text-transform: uppercase;
+ line-height: @icon-size-half;
+ }
+
+ footer .social a {
+ margin-left: @gutter;
+ }
+
+ .icon-github {
+ background-image: url(/images/github-grey.svg);
+ background-repeat: no-repeat;
+ width: @icon-size-half;
+ height: @icon-size-half;
+ display: block;
+ background-size: @icon-size-half auto;
+ }
+}
+
.intro-detail {
margin: 28px 0;
padding-left: 80px;
@@ -25,4 +139,20 @@
.intro-detail-discovery {
background-image: url(/images/discovery.svg);
+}
+
+.embed-container {
+ position: relative;
+ height: 0;
+ overflow: hidden;
+ max-width: 100%;
+ padding-bottom: 56.25%; /* YouTube aspect ratio */
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
}
\ No newline at end of file
diff --git a/stylesheets/main.less b/stylesheets/main.less
index 383f14a..4a74af4 100644
--- a/stylesheets/main.less
+++ b/stylesheets/main.less
@@ -224,7 +224,7 @@
.toc {
@import "toc";
- @media (min-width: 1100px) {
+ @media (min-width: (@main-max-width + 2 * @sidebar-width)) {
position: fixed;
top: @header-height;
right: 0;
diff --git a/stylesheets/note.less b/stylesheets/note.less
index 1d50201..ec12fe3 100644
--- a/stylesheets/note.less
+++ b/stylesheets/note.less
@@ -20,10 +20,6 @@
margin: @gutter-half 0;
}
-p, ul, li {
- font-size: 12px;
-}
-
pre {
width: inherit;
}
diff --git a/templates/layouts/default.mustache b/templates/layouts/default.mustache
index 0599e85..42cc6b5 100644
--- a/templates/layouts/default.mustache
+++ b/templates/layouts/default.mustache
@@ -2,8 +2,8 @@
<html>
{{> partials/head }}
<body>
- {{> partials/header }}
- {{> partials/sidebar }}
+ {{> partials/core_header }}
+ {{> partials/core_sidebar }}
<main>
<h1 class="title">
{{# page.fullTitle }}{{ page.fullTitle }}{{/ page.fullTitle }}
diff --git a/templates/layouts/home.mustache b/templates/layouts/home.mustache
new file mode 100644
index 0000000..ef3fbc9
--- /dev/null
+++ b/templates/layouts/home.mustache
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+ {{> partials/head }}
+
+ <body data-pathname="{{ page.url }}" class="home-layout not-scrolled">
+ {{> partials/home_header }}
+ <main>
+ {{{ yield }}}
+ </main>
+
+ {{> partials/footer }}
+ </body>
+</html>
diff --git a/templates/layouts/java_tutorial.mustache b/templates/layouts/java_tutorial.mustache
index 54b2206..99efe48 100644
--- a/templates/layouts/java_tutorial.mustache
+++ b/templates/layouts/java_tutorial.mustache
@@ -2,8 +2,8 @@
<html>
{{> partials/head }}
<body>
- {{> partials/header }}
- {{> partials/sidebar }}
+ {{> partials/core_header }}
+ {{> partials/core_sidebar }}
<main>
<h1 class="title">
{{# page.fullTitle }}{{ page.fullTitle }}{{/ page.fullTitle }}
diff --git a/templates/layouts/tutorial.mustache b/templates/layouts/tutorial.mustache
index cd44101..7e5e5fb 100644
--- a/templates/layouts/tutorial.mustache
+++ b/templates/layouts/tutorial.mustache
@@ -2,8 +2,8 @@
<html>
{{> partials/head }}
<body>
- {{> partials/header }}
- {{> partials/sidebar }}
+ {{> partials/core_header }}
+ {{> partials/core_sidebar }}
<main>
<h1 class="title">
{{# page.fullTitle }}{{ page.fullTitle }}{{/ page.fullTitle }}
diff --git a/templates/partials/header.mustache b/templates/partials/core_header.mustache
similarity index 60%
rename from templates/partials/header.mustache
rename to templates/partials/core_header.mustache
index ebe07ee..1a9ca47 100644
--- a/templates/partials/header.mustache
+++ b/templates/partials/core_header.mustache
@@ -1,11 +1,11 @@
<header class="mdl-shadow--2dp">
<div class="row">
<div class="icon menu"><i class="material-icons">menu</i></div>
- <div class="icon v-icon"><img src="/images/v-icon-white.svg"></div>
- <div class="logo"><a href="/">Vanadium</a></div>
+ <div class="icon v-icon"><a href="/"><img src="/images/v-icon-white.svg"></a></div>
+ <div class="logo"><a href="/core.html">Vanadium Core</a></div>
<div class="spacer"></div>
<nav>
- <a href="/">Overview</a>
+ <a href="/core.html">Overview</a>
<a href="/installation/">Installation</a>
<a href="/tutorials/hello-world.html">Tutorials</a>
</nav>
diff --git a/templates/partials/sidebar.mustache b/templates/partials/core_sidebar.mustache
similarity index 98%
rename from templates/partials/sidebar.mustache
rename to templates/partials/core_sidebar.mustache
index 29598e0..540d8c1 100644
--- a/templates/partials/sidebar.mustache
+++ b/templates/partials/core_sidebar.mustache
@@ -5,7 +5,7 @@
<div class="sidebar"></div>
{{! TODO(sadovsky): Transmit data as JSON, not HTML. }}
<div class="sidebar-data">
- <a href="/">Overview</a>
+ <a href="/core.html">Overview</a>
<a href="/installation/">Installation</a>
<a href="#" class="nav">Tutorials</a>
diff --git a/templates/partials/footer.mustache b/templates/partials/footer.mustache
new file mode 100644
index 0000000..79c7c08
--- /dev/null
+++ b/templates/partials/footer.mustache
@@ -0,0 +1,13 @@
+<footer>
+ <nav class="main">
+ <a href="/syncbase">Syncbase</a>
+ <a href="/core.html">Vanadium Core</a>
+ <a href="/community/contributing.html">Community</a>
+ <a href="/tos.html">Terms of service</a>
+ <a target="_blank" href="https://github.com/vanadium/issues/issues/">File a Bug</a>
+ </nav>
+
+ <nav class="social">
+ <a href="https://github.com/vanadium" class="icon-github"></a>
+ </nav>
+</footer>
diff --git a/templates/partials/home_header.mustache b/templates/partials/home_header.mustache
new file mode 100644
index 0000000..8354d98
--- /dev/null
+++ b/templates/partials/home_header.mustache
@@ -0,0 +1,13 @@
+<header class="mdl-shadow--2dp">
+ <div class="row">
+ <div class="icon menu"><i class="material-icons">menu</i></div>
+ <div class="icon v-icon"><a href="/"><img src="/images/v-icon-white.svg"></a></div>
+ <div class="logo"><a href="/">Vanadium</a></div>
+ <div class="spacer"></div>
+ <nav>
+ <a href="/syncbase">Syncbase</a>
+ <a href="/core.html">Vanadium Core</a>
+ <a target="_blank" href="https://github.com/vanadium">GitHub</a>
+ </nav>
+ </div>
+</header>
