Index: sky/examples/flights/index.sky |
diff --git a/sky/examples/flights/index.sky b/sky/examples/flights/index.sky |
new file mode 100644 |
index 0000000000000000000000000000000000000000..22d468589537cf9e5a32dab65bcc6f74fbc1443c |
--- /dev/null |
+++ b/sky/examples/flights/index.sky |
@@ -0,0 +1,288 @@ |
+<app> |
+ <style> |
+ * { box-sizing: border-box; } |
+ |
+ t, span { |
+ display: inline; |
+ } |
+ |
+ app { |
+ display: flex; |
+ flex-direction: column; |
+ height: 100%; |
+ background-color: #494949; |
+ font-family: "Helvetica Neue", sans-serif; |
+ font-size: 16px; |
+ color: #2B2B2B; |
+ } |
+ |
+ app-header { |
+ display: flex; |
+ background: linear-gradient(#3E77B7, #6C98C4); |
+ padding: 8px; |
+ color: white; |
+ border-bottom: 1px solid #3E77B7; |
+ } |
+ |
+ app-title { |
+ flex: 1; |
+ display: flex; |
+ align-items: center; |
+ font-size: 22px; |
+ margin-left: 8px; |
+ } |
+ |
+ app-menu-button { |
+ display: flex; |
+ border-radius: 4px; |
+ justify-content: center; |
+ align-items: center; |
+ width: 30px; |
+ height: 30px; |
+ } |
+ |
+ .menu-icon { |
+ width: 18px; |
+ } |
+ |
+ .menu-icon-inner { |
+ width: 14px; |
+ } |
+ |
+ app-scrollable { |
+ flex: 1; |
+ box-shadow: inset 0px 0px 22px 2px rgba(22, 22, 22, 0.63); |
+ overflow: scroll; |
+ } |
+ |
+ app-panel { |
+ display: flex; |
+ flex-direction: column; |
+ background-color: white; |
+ } |
+ |
+ app-panel-header { |
+ background-color: #DEDEDE; |
+ padding: 8px; |
+ display: flex; |
+ align-items: center; |
+ } |
+ |
+ app-panel-content { |
+ display: flex; |
+ } |
+ |
+ app-toolbar { |
+ background-color: #F6F6F6; |
+ padding: 0 8px; |
+ } |
+ |
+ app-search-input { |
+ background-color: #F6F6F6; |
+ padding: 4px; |
+ display: flex; |
+ align-items: center; |
+ font-size: 1.2em; |
+ } |
+ |
+ app-toast { |
+ position: absolute; |
+ bottom: 32px; |
+ right: 32px; |
+ max-width: 55%; |
+ box-shadow: 0px 0px 12px 2px rgba(22, 22, 22, 0.4); |
+ background-color: #b0281a; |
+ background-image: linear-gradient(#E5D658, #DFCF43); |
+ border: 1px solid #AEA477; |
+ padding: 6px; |
+ border-radius: 2px; |
+ display: flex; |
+ align-items: center; |
+ font-size: 0.8em; |
+ } |
+ |
+ app-toast-header { |
+ flex-shrink: 0; |
+ margin-right: 6px; |
+ } |
+ |
+ .tip-icon { |
+ font-weight: bold; |
+ font-size: 24px; |
+ border-radius: 16px; |
+ width: 32px; |
+ height: 32px; |
+ border: 2px solid black; |
+ line-height: 30px; |
+ text-align: center; |
+ } |
+ |
+ .tip-price { |
+ font-weight: bold; |
+ } |
+ |
+ .input-text { |
+ margin-left: 8px; |
+ } |
+ |
+ .route-result { |
+ margin: 16px 16px 0 16px; |
+ } |
+ |
+ .route-title { |
+ flex: 1; |
+ } |
+ |
+ .airline { |
+ border-radius: 2px; |
+ align-items: center; |
+ padding: 8px; |
+ } |
+ |
+ .airline-name { |
+ flex: 1; |
+ } |
+ |
+ .airline-logo-image { |
+ width: 50px; |
+ flex-shrink: 0; |
+ } |
+ |
+ .airline-best-price { |
+ color: #ABB4B6; |
+ } |
+ |
+ .airline-name, |
+ .airline-best-price { |
+ padding: 8px; |
+ } |
+ |
+ a { |
+ text-decoration: none; |
+ color: #1155CC; |
+ } |
+ </style> |
+ <app-header> |
+ <app-title> |
+ <t>Search</t> |
+ </app-title> |
+ <app-menu-button> |
+ <img src="images/menu-white.png" class="menu-icon"> |
+ </app-menu-button> |
+ </app-header> |
+ <app-toolbar> |
+ <app-search-input> |
+ <span class="input-icon"><t>🔎</t></span> |
+ <span class="input-text"><t>flights today to dc by price</t></span> |
+ </app-search-input> |
+ </app-toolbar> |
+ <app-scrollable> |
+ <app-panel class="route-result"> |
+ <app-panel-header> |
+ <div class="route-title"> |
+ <t>SFO to DCA</t> |
+ </div> |
+ <app-menu-button> |
+ <img src="images/menu-enabled.png" class="menu-icon-inner"> |
+ </app-menu-button> |
+ </app-panel-header> |
+ <app-panel-content class="airline"> |
+ <div class="airline-logo"> |
+ <img class="airline-logo-image" src="images/virgin-america.jpg"> |
+ </div> |
+ <div class="airline-name"> |
+ <t>Virgin America</t> |
+ </div> |
+ <div class="airline-best-price"> |
+ <t><a>$800</a></t> |
+ </div> |
+ </app-panel-content> |
+ <app-panel-content class="airline"> |
+ <div class="airline-logo"> |
+ <img class="airline-logo-image" src="images/ba.jpg"> |
+ </div> |
+ <div class="airline-name"> |
+ <t>British Airways</t> |
+ </div> |
+ <div class="airline-best-price"> |
+ <t><a>$700</a></t> |
+ </div> |
+ </app-panel-content> |
+ <app-panel-content class="airline"> |
+ <div class="airline-logo"> |
+ <img class="airline-logo-image" src="images/united.jpg"> |
+ </div> |
+ <div class="airline-name"> |
+ <t>United</t> |
+ </div> |
+ <div class="airline-best-price"> |
+ <t><a>$667</a></t> |
+ </div> |
+ </app-panel-content> |
+ <app-panel-content class="airline"> |
+ <div class="airline-logo"> |
+ <img class="airline-logo-image" src="images/delta.jpg"> |
+ </div> |
+ <div class="airline-name"> |
+ <t>Delta</t> |
+ </div> |
+ <div class="airline-best-price"> |
+ <t><a>$450</a></t> |
+ </div> |
+ </app-panel-content> |
+ </app-panel> |
+ <app-panel class="route-result"> |
+ <app-panel-header> |
+ <div class="route-title"> |
+ <t>SJC to DCA</t> |
+ </div> |
+ <app-menu-button> |
+ <img src="images/menu-enabled.png" class="menu-icon-inner"> |
+ </app-menu-button> |
+ </app-panel-header> |
+ <app-panel-content class="airline"> |
+ <div class="airline-logo"> |
+ <img class="airline-logo-image" src="images/virgin-america.jpg"> |
+ </div> |
+ <div class="airline-name"> |
+ <t>Virgin America</t> |
+ </div> |
+ <div class="airline-best-price"> |
+ <t><a>$1500</a></t> |
+ </div> |
+ </app-panel-content> |
+ <app-panel-content class="airline"> |
+ <div class="airline-logo"> |
+ <img class="airline-logo-image" src="images/jetblue.jpg"> |
+ </div> |
+ <div class="airline-name"> |
+ <t>jetBlue</t> |
+ </div> |
+ <div class="airline-best-price"> |
+ <t><a>$650</a></t> |
+ </div> |
+ </app-panel-content> |
+ <app-panel-content class="airline"> |
+ <div class="airline-logo"> |
+ <img class="airline-logo-image" src="images/united.jpg"> |
+ </div> |
+ <div class="airline-name"> |
+ <t>United</t> |
+ </div> |
+ <div class="airline-best-price"> |
+ <t><a>$367</a></t> |
+ </div> |
+ </app-panel-content> |
+ </app-panel> |
+ </app-scrollable> |
+ <app-toast> |
+ <app-toast-header> |
+ <div class="tip-icon"> |
+ <t>?</t> |
+ </div> |
+ </app-toast-header> |
+ <app-toast-content> |
+ <t>Flights are <span class="tip-price">$200</span> cheaper tomorrow.</t> |
+ </app-toast-content> |
+ </app-toast> |
+</app> |