├── custom-tab-demo ├── app │ ├── .gitignore │ ├── src │ │ └── main │ │ │ ├── res │ │ │ ├── values │ │ │ │ ├── strings.xml │ │ │ │ ├── colors.xml │ │ │ │ ├── dimens.xml │ │ │ │ └── styles.xml │ │ │ ├── mipmap-hdpi │ │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-mdpi │ │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xhdpi │ │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxhdpi │ │ │ │ └── ic_launcher.png │ │ │ ├── mipmap-xxxhdpi │ │ │ │ └── ic_launcher.png │ │ │ ├── values-w820dp │ │ │ │ └── dimens.xml │ │ │ └── layout │ │ │ │ └── activity_main.xml │ │ │ ├── AndroidManifest.xml │ │ │ └── java │ │ │ └── com │ │ │ └── example │ │ │ └── samsunginternet │ │ │ └── customtabdemo │ │ │ ├── MainActivity.java │ │ │ └── customtab │ │ │ ├── CustomTabHelper.java │ │ │ └── CustomTabServiceController.java │ ├── proguard-rules.pro │ └── build.gradle ├── settings.gradle ├── docs │ ├── screenshot.png │ └── samsung-internet-custom-tab.gif ├── .gitignore ├── gradle │ └── wrapper │ │ ├── gradle-wrapper.jar │ │ └── gradle-wrapper.properties ├── build.gradle ├── gradle.properties ├── README.md ├── gradlew.bat └── gradlew ├── 360-video ├── poster.jpg ├── paris-by-diego.mp4 ├── paris-by-diego.ogg ├── paris-by-diego.webm ├── README.md └── index.html ├── socks-megastore ├── images │ ├── socks-emoji.png │ ├── socks-emoji-purple.png │ ├── samsung-internet-socks-1.jpg │ ├── samsung-internet-socks-2.jpg │ ├── samsung-internet-socks-3.jpg │ ├── samsung-internet-socks-4.jpg │ └── samsung-internet-socks-5.jpg ├── README.md ├── index.html ├── after-simple │ └── index.html ├── after-options │ └── index.html └── before │ └── index.html ├── payment-request-demo-simple ├── images │ ├── favicon.png │ └── homescreen │ │ ├── 144.png │ │ ├── 168.png │ │ ├── 192.png │ │ ├── 48.png │ │ ├── 72.png │ │ └── 96.png ├── manifest.json ├── styles.css ├── README.md ├── index.html └── index.js ├── payment-request-demo-options ├── images │ ├── favicon.png │ └── homescreen │ │ ├── 144.png │ │ ├── 168.png │ │ ├── 192.png │ │ ├── 48.png │ │ ├── 72.png │ │ └── 96.png ├── manifest.json ├── styles.css ├── README.md ├── index.html └── index.js ├── card-layout ├── README.md ├── reset.css ├── styles.css └── index.html ├── holy-grail-layout-grid ├── README.md ├── styles.css ├── index.html └── reset.css ├── full-page-grid-layout ├── README.md ├── styles.css └── index.html ├── simple-grid-layout ├── README.md ├── reset.css ├── styles.css └── index.html ├── README.md └── LICENSE /custom-tab-demo/app/.gitignore: -------------------------------------------------------------------------------- 1 | /build 2 | -------------------------------------------------------------------------------- /custom-tab-demo/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | -------------------------------------------------------------------------------- /360-video/poster.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/360-video/poster.jpg -------------------------------------------------------------------------------- /360-video/paris-by-diego.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/360-video/paris-by-diego.mp4 -------------------------------------------------------------------------------- /360-video/paris-by-diego.ogg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/360-video/paris-by-diego.ogg -------------------------------------------------------------------------------- /360-video/paris-by-diego.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/360-video/paris-by-diego.webm -------------------------------------------------------------------------------- /custom-tab-demo/docs/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/custom-tab-demo/docs/screenshot.png -------------------------------------------------------------------------------- /socks-megastore/images/socks-emoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/socks-megastore/images/socks-emoji.png -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | Custom Tab Demo 3 | 4 | -------------------------------------------------------------------------------- /custom-tab-demo/.gitignore: -------------------------------------------------------------------------------- 1 | *.iml 2 | .gradle 3 | /local.properties 4 | /.idea/* 5 | .DS_Store 6 | /build 7 | /captures 8 | .externalNativeBuild 9 | -------------------------------------------------------------------------------- /payment-request-demo-simple/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-simple/images/favicon.png -------------------------------------------------------------------------------- /socks-megastore/images/socks-emoji-purple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/socks-megastore/images/socks-emoji-purple.png -------------------------------------------------------------------------------- /custom-tab-demo/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/custom-tab-demo/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /payment-request-demo-options/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-options/images/favicon.png -------------------------------------------------------------------------------- /socks-megastore/images/samsung-internet-socks-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/socks-megastore/images/samsung-internet-socks-1.jpg -------------------------------------------------------------------------------- /socks-megastore/images/samsung-internet-socks-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/socks-megastore/images/samsung-internet-socks-2.jpg -------------------------------------------------------------------------------- /socks-megastore/images/samsung-internet-socks-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/socks-megastore/images/samsung-internet-socks-3.jpg -------------------------------------------------------------------------------- /socks-megastore/images/samsung-internet-socks-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/socks-megastore/images/samsung-internet-socks-4.jpg -------------------------------------------------------------------------------- /socks-megastore/images/samsung-internet-socks-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/socks-megastore/images/samsung-internet-socks-5.jpg -------------------------------------------------------------------------------- /custom-tab-demo/docs/samsung-internet-custom-tab.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/custom-tab-demo/docs/samsung-internet-custom-tab.gif -------------------------------------------------------------------------------- /payment-request-demo-options/images/homescreen/144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-options/images/homescreen/144.png -------------------------------------------------------------------------------- /payment-request-demo-options/images/homescreen/168.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-options/images/homescreen/168.png -------------------------------------------------------------------------------- /payment-request-demo-options/images/homescreen/192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-options/images/homescreen/192.png -------------------------------------------------------------------------------- /payment-request-demo-options/images/homescreen/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-options/images/homescreen/48.png -------------------------------------------------------------------------------- /payment-request-demo-options/images/homescreen/72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-options/images/homescreen/72.png -------------------------------------------------------------------------------- /payment-request-demo-options/images/homescreen/96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-options/images/homescreen/96.png -------------------------------------------------------------------------------- /payment-request-demo-simple/images/homescreen/144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-simple/images/homescreen/144.png -------------------------------------------------------------------------------- /payment-request-demo-simple/images/homescreen/168.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-simple/images/homescreen/168.png -------------------------------------------------------------------------------- /payment-request-demo-simple/images/homescreen/192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-simple/images/homescreen/192.png -------------------------------------------------------------------------------- /payment-request-demo-simple/images/homescreen/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-simple/images/homescreen/48.png -------------------------------------------------------------------------------- /payment-request-demo-simple/images/homescreen/72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-simple/images/homescreen/72.png -------------------------------------------------------------------------------- /payment-request-demo-simple/images/homescreen/96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/payment-request-demo-simple/images/homescreen/96.png -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/custom-tab-demo/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/custom-tab-demo/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/custom-tab-demo/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/custom-tab-demo/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SamsungInternet/examples/HEAD/custom-tab-demo/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /card-layout/README.md: -------------------------------------------------------------------------------- 1 | # Card Layout 2 | 3 | A card based web layout built using CSS columns (and cats) 4 | 5 | Licensed under the MIT License https://github.com/SamsungInternet/examples/blob/master/LICENSE 6 | 7 | 8 | -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #987fff 4 | #FF4081 5 | 6 | -------------------------------------------------------------------------------- /holy-grail-layout-grid/README.md: -------------------------------------------------------------------------------- 1 | # Holy Grail Layout 2 | 3 | A full page layout built with CSS Grid (but no cats :( ) 4 | 5 | This code is licensed for reuse under the MIT license 6 | https://github.com/SamsungInternet/examples/blob/master/LICENSE 7 | -------------------------------------------------------------------------------- /full-page-grid-layout/README.md: -------------------------------------------------------------------------------- 1 | # Full Page Gallery Layout 2 | 3 | A full page gallery layout built with CSS Grid (and cats!) 4 | 5 | This code is licensed for reuse under the MIT license 6 | https://github.com/SamsungInternet/examples/blob/master/LICENSE 7 | -------------------------------------------------------------------------------- /simple-grid-layout/README.md: -------------------------------------------------------------------------------- 1 | # Large header followed by grid elements 2 | 3 | A common web layout built with CSS grid (and cats!) 4 | 5 | This code is licensed for reuse under the MIT license 6 | https://github.com/SamsungInternet/examples/blob/master/LICENSE 7 | 8 | -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/values/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16dp 4 | 16dp 5 | 6 | -------------------------------------------------------------------------------- /custom-tab-demo/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Mon Dec 28 10:00:20 PST 2015 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip 7 | -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/values-w820dp/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 64dp 6 | 7 | -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /360-video/README.md: -------------------------------------------------------------------------------- 1 | # 360 degree video demo 2 | 3 | A simple example of Samsung Internet's 360 degree video playback, enabled by 4 | adding `dimension=360` to the `type` attribute of the `video` tag. 5 | 6 | ``` 7 | 8 | ``` 9 | 10 | In Samsung Internet v4.2+, press play and then the fullscreen icon, to play 11 | the video in 360 degree mode. Now you can rotate your phone around to change the view. 12 | -------------------------------------------------------------------------------- /socks-megastore/README.md: -------------------------------------------------------------------------------- 1 | # Socks Megastore! 2 | 3 | For all your online sock needs! 4 | 5 | OK, it's not really real ;-) It's a set of examples demonstrating [Web Payments](https://medium.com/samsung-internet-dev/how-to-take-payments-on-the-web-with-the-payment-request-api-a523f6fc7c1f). 6 | 7 | * [before](before/): An example of a typical checkout process, before adopting the Payment Request API. 8 | * [after-simple](after-simple/): After adding the Payment Request API - a most basic example 9 | * [after-options](after-options/): An example that adds some more options for shipping, contact details etc. 10 | 11 | -------------------------------------------------------------------------------- /custom-tab-demo/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | repositories { 5 | jcenter() 6 | } 7 | dependencies { 8 | classpath 'com.android.tools.build:gradle:2.2.3' 9 | 10 | // NOTE: Do not place your application dependencies here; they belong 11 | // in the individual module build.gradle files 12 | } 13 | } 14 | 15 | allprojects { 16 | repositories { 17 | jcenter() 18 | } 19 | } 20 | 21 | task clean(type: Delete) { 22 | delete rootProject.buildDir 23 | } 24 | -------------------------------------------------------------------------------- /custom-tab-demo/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /home/SERILOCAL/p.oshaughnes/Android/Sdk/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | This repository contains miscellaneous examples from the Samsung Internet team: 4 | 5 | * [360-video](360-video/) - Samsung Internet 360 degree video playback 6 | * [custom-tab-demo](custom-tab-demo/) - an Android Custom Tab example that works with Samsung Internet 7 | * [payment-request-demo-simple](payment-request-demo-simple/) - a simple Payment Request API demo for taking a (simulated) payment 8 | * [payment-request-demo-options](payment-request-demo-options/) - extended version of the Payment Request API demo with shipping address etc. 9 | * [socks-megastore](socks-megastore/) - a set of Web Payments examples 10 | * [card-layout](card-layout/) - card layout CSS columns example 11 | * [full-page-grid-layout](full-page-grid-layout/) - full page gallery example in CSS grid 12 | * [holy-grail-layout-grid](holy-grail-layout-grid/) - holy grail layout example in CSS grid 13 | * [simple-grid-layout](simple-grid-layout/) - simple layout example in grid CSS 14 | -------------------------------------------------------------------------------- /custom-tab-demo/gradle.properties: -------------------------------------------------------------------------------- 1 | ## Project-wide Gradle settings. 2 | # 3 | # For more details on how to configure your build environment visit 4 | # http://www.gradle.org/docs/current/userguide/build_environment.html 5 | # 6 | # Specifies the JVM arguments used for the daemon process. 7 | # The setting is particularly useful for tweaking memory settings. 8 | # Default value: -Xmx1024m -XX:MaxPermSize=256m 9 | # org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8 10 | # 11 | # When configured, Gradle will run in incubating parallel mode. 12 | # This option should only be used with decoupled projects. More details, visit 13 | # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects 14 | # org.gradle.parallel=true 15 | #Wed Oct 19 12:49:24 BST 2016 16 | systemProp.http.proxyHost=106.1.18.35 17 | org.gradle.jvmargs=-Xmx1536m 18 | systemProp.http.proxyPort=8080 19 | systemProp.https.proxyHost=106.1.18.35 20 | systemProp.https.proxyPort=8080 21 | 22 | -------------------------------------------------------------------------------- /360-video/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 360 video demo 6 | 15 | 16 | 17 |

360 video demo

18 | 19 |

A simple example of Samsung Internet's 360 degree video playback, enabled by 20 | adding dimension=360 to the type attribute of the video tag.

21 | 22 | 23 | 24 |

Instructions: In Samsung Internet v4.2+, press play and then the fullscreen icon, to play 25 | the video in 360 degree mode. Now you can rotate your phone around to change the view.

26 | 27 | 28 | -------------------------------------------------------------------------------- /holy-grail-layout-grid/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: arial; 3 | } 4 | 5 | .container { 6 | display: flex; 7 | flex-direction: column; 8 | min-height: 100vh; 9 | } 10 | 11 | 12 | @media (min-width: 768px) { 13 | .container { 14 | display: grid; 15 | grid-template-columns: 200px 1fr 200px; 16 | grid-template-rows: auto 1fr auto; 17 | 18 | } 19 | } 20 | 21 | header { 22 | grid-column: span 3; 23 | padding: 30px; 24 | text-align: center; 25 | font-size: 1.4em; 26 | background-color: #369; 27 | color: white; 28 | } 29 | 30 | main { 31 | flex: 1; 32 | padding: 20px; 33 | } 34 | 35 | nav { 36 | background-color: #f90; 37 | padding: 20px; 38 | } 39 | 40 | aside { 41 | padding: 20px; 42 | background-color: #936; 43 | } 44 | 45 | footer { 46 | grid-column: span 3; 47 | padding: 30px; 48 | text-align: center; 49 | font-size: 1.4em; 50 | background-color: #690; 51 | color: white; 52 | } 53 | 54 | h1 { 55 | margin-bottom: 1em; 56 | font-size: 1.3em; 57 | font-weight: bold; 58 | } -------------------------------------------------------------------------------- /payment-request-demo-simple/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PaymentDemo", 3 | "short_name": "PaymentDemo", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#f4f2ff", 7 | "theme_color": "#f4f2ff", 8 | "description": "A simple Payment Request API demo.", 9 | "icons": [ 10 | { 11 | "src": "images/homescreen/48.png", 12 | "sizes": "48x48", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "images/homescreen/72.png", 17 | "sizes": "72x72", 18 | "type": "image/png" 19 | }, 20 | { 21 | "src": "images/homescreen/96.png", 22 | "sizes": "96x96", 23 | "type": "image/png" 24 | }, 25 | { 26 | "src": "images/homescreen/144.png", 27 | "sizes": "144x144", 28 | "type": "image/png" 29 | }, 30 | { 31 | "src": "images/homescreen/168.png", 32 | "sizes": "168x168", 33 | "type": "image/png" 34 | }, 35 | { 36 | "src": "images/homescreen/192.png", 37 | "sizes": "192x192", 38 | "type": "image/png" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /payment-request-demo-options/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "PaymentDemo", 3 | "short_name": "PaymentDemo", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#f4f2ff", 7 | "theme_color": "#f4f2ff", 8 | "description": "A simple Payment Request API demo.", 9 | "icons": [ 10 | { 11 | "src": "images/homescreen/48.png", 12 | "sizes": "48x48", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "images/homescreen/72.png", 17 | "sizes": "72x72", 18 | "type": "image/png" 19 | }, 20 | { 21 | "src": "images/homescreen/96.png", 22 | "sizes": "96x96", 23 | "type": "image/png" 24 | }, 25 | { 26 | "src": "images/homescreen/144.png", 27 | "sizes": "144x144", 28 | "type": "image/png" 29 | }, 30 | { 31 | "src": "images/homescreen/168.png", 32 | "sizes": "168x168", 33 | "type": "image/png" 34 | }, 35 | { 36 | "src": "images/homescreen/192.png", 37 | "sizes": "192x192", 38 | "type": "image/png" 39 | } 40 | ] 41 | } -------------------------------------------------------------------------------- /custom-tab-demo/app/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.application' 2 | 3 | android { 4 | compileSdkVersion 24 5 | buildToolsVersion "24.0.3" 6 | defaultConfig { 7 | applicationId "com.example.poshaughnes.myapplication" 8 | minSdkVersion 18 9 | targetSdkVersion 24 10 | versionCode 1 11 | versionName "1.0" 12 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 13 | } 14 | buildTypes { 15 | release { 16 | minifyEnabled false 17 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 18 | } 19 | } 20 | productFlavors { 21 | } 22 | } 23 | 24 | dependencies { 25 | compile fileTree(include: ['*.jar'], dir: 'libs') 26 | androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { 27 | exclude group: 'com.android.support', module: 'support-annotations' 28 | }) 29 | compile 'com.android.support:appcompat-v7:24.2.1' 30 | compile 'com.android.support:customtabs:24.0.0' 31 | testCompile 'junit:junit:4.12' 32 | } 33 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Samsung Internet Dev Rel 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /holy-grail-layout-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello! 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |
Header
13 | 14 |
15 |

Main

16 |

Vestibulum consectetur sit amet nisi ut consectetur. Praesent efficitur, nibh vitae fringilla scelerisque, est neque faucibus quam, in iaculis purus libero eget mauris. Curabitur et luctus sapien, ac gravida orci. Aliquam erat volutpat. In hac habitasse platea dictumst. Aenean commodo, arcu a commodo efficitur, libero dolor mollis turpis, non posuere orci leo eget enim. Curabitur sit amet elementum orci, pulvinar dignissim urna. Morbi id ex eu ex congue laoreet. Aenean tincidunt dolor justo, semper pretium libero luctus nec. Ut vulputate metus accumsan leo imperdiet tincidunt. Phasellus nec rutrum dolor. Cras imperdiet sollicitudin arcu, id interdum nibh fermentum in.

17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /simple-grid-layout/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v2.0 | 20110126 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, menu, nav, section { 29 | display: block; 30 | } 31 | body { 32 | line-height: 1; 33 | } 34 | ol, ul { 35 | list-style: none; 36 | } 37 | blockquote, q { 38 | quotes: none; 39 | } 40 | blockquote:before, blockquote:after, 41 | q:before, q:after { 42 | content: ''; 43 | content: none; 44 | } 45 | table { 46 | border-collapse: collapse; 47 | border-spacing: 0; 48 | } -------------------------------------------------------------------------------- /payment-request-demo-options/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica, Arial, sans-serif; 3 | text-align: center; 4 | margin: 0; 5 | padding: 0 10px; 6 | background: #f4f2ff; 7 | } 8 | @media (min-width: 500px) { 9 | body { 10 | padding: 0 6%; 11 | } 12 | } 13 | @media (min-width: 800px) { 14 | body { 15 | padding: 0 10%; 16 | } 17 | } 18 | h1 { 19 | font-weight: normal; 20 | font-style: italic; 21 | } 22 | h2 { 23 | font-size: 1.3em; 24 | margin-bottom: 1.5em; 25 | } 26 | a, 27 | a:hover, 28 | a:visited { 29 | color: #7f4fff; 30 | text-decoration: none; 31 | } 32 | p { 33 | text-align: justify; 34 | } 35 | #donate { 36 | display: none; 37 | } 38 | #donate-button { 39 | font-size: 1.2em; 40 | padding: 8px 12px; 41 | margin: 1em 0; 42 | border: 0; 43 | border-radius: 5px; 44 | background: #7f4fff; 45 | color: white; 46 | cursor: pointer; 47 | } 48 | #success, 49 | #error { 50 | display: none; 51 | font-weight: bold; 52 | margin: 1.5em 0; 53 | } 54 | #unsupported { 55 | display: none; 56 | font-style: italic; 57 | } 58 | #unsupported .warning { 59 | font-weight: bold; 60 | color: #f47953; 61 | margin-bottom: 0.5em; 62 | } 63 | #unsupported .description { 64 | margin: 0 0 2em 0; 65 | } 66 | footer { 67 | margin-top: 2em; 68 | font-size: 0.95em; 69 | color: #666; 70 | } 71 | -------------------------------------------------------------------------------- /payment-request-demo-simple/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Helvetica, Arial, sans-serif; 3 | text-align: center; 4 | margin: 0; 5 | padding: 0 10px; 6 | background: #f4f2ff; 7 | } 8 | @media (min-width: 500px) { 9 | body { 10 | padding: 0 6%; 11 | } 12 | } 13 | @media (min-width: 800px) { 14 | body { 15 | padding: 0 10%; 16 | } 17 | } 18 | h1 { 19 | font-weight: normal; 20 | font-style: italic; 21 | } 22 | h2 { 23 | font-size: 1.3em; 24 | margin-bottom: 1.5em; 25 | } 26 | a, 27 | a:hover, 28 | a:visited { 29 | color: #7f4fff; 30 | text-decoration: none; 31 | } 32 | p { 33 | text-align: justify; 34 | } 35 | #donate { 36 | display: none; 37 | } 38 | #donate-button { 39 | font-size: 1.2em; 40 | padding: 8px 12px; 41 | margin: 1em 0; 42 | border: 0; 43 | border-radius: 5px; 44 | background: #7f4fff; 45 | color: white; 46 | cursor: pointer; 47 | } 48 | #success, 49 | #error { 50 | display: none; 51 | font-weight: bold; 52 | margin: 1.5em 0; 53 | } 54 | #unsupported { 55 | display: none; 56 | font-style: italic; 57 | } 58 | #unsupported .warning { 59 | font-weight: bold; 60 | color: #f47953; 61 | margin-bottom: 0.5em; 62 | } 63 | #unsupported .description { 64 | margin: 0 0 2em 0; 65 | } 66 | footer { 67 | margin-top: 2em; 68 | font-size: 0.95em; 69 | color: #666; 70 | } 71 | -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 13 | 14 | 18 | 19 | 20 |

Success! We simulated the payment 😉

21 |

Aw, unable to complete the payment simulation! 😫

22 | 23 |
24 |

Sorry your browser does not appear to support the Payment Request API.

25 |

Normally we would practise progressive enhancement and use another payment UI here, 26 | but this is just a Payment Request demonstration!

27 |
28 |

For more information, see the README and the blog post.

29 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /payment-request-demo-options/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | PaymentDemo 9 | 10 | 11 | 12 | 13 | 14 |

Payment Demo

15 |

An example of the Payment Request API with additional options.

16 | 23 |
24 |

Sorry your browser does not appear to support the Payment Request API.

25 |

Normally we would practise progressive enhancement and use another payment UI here, 26 | but this is just a Payment Request demonstration!

27 |
28 |

For more information, see the README and the blog post.

29 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /card-layout/styles.css: -------------------------------------------------------------------------------- 1 | /* Layout styles -----------------------------------*/ 2 | @media (min-width: 620px) { 3 | main { 4 | column-count: 2; 5 | column-gap: 20px; 6 | } 7 | 8 | section { 9 | break-inside: avoid; 10 | } 11 | } 12 | 13 | @media (min-width: 960px) { 14 | main { 15 | column-count: 3; 16 | } 17 | } 18 | 19 | /* styles */ 20 | 21 | :root { 22 | --blue: #34495e; 23 | --green: #e74c3c; 24 | --yellow: #C9C243; 25 | --orange: #FFA644; 26 | --red: #3498db; 27 | } 28 | 29 | body { 30 | background-color: var(--blue); 31 | font-family: 'Ubuntu', sans-serif; 32 | color: #34495e; 33 | } 34 | 35 | main { 36 | max-width: 1200px; 37 | margin: 0 auto; 38 | padding: 20px 40px; 39 | } 40 | 41 | header { 42 | max-width: 1200px; 43 | margin: 0 auto; 44 | padding: 20px 40px 0; 45 | } 46 | 47 | .title { 48 | font-size: 2.6em; 49 | text-align: center; 50 | color: white; 51 | margin-bottom: 20px 52 | } 53 | 54 | .figure-img { 55 | display: block; 56 | width: 100%; 57 | object: fit; 58 | } 59 | 60 | h2 { 61 | font-size: 1.4em; 62 | padding: 10px; 63 | } 64 | 65 | p { 66 | margin-bottom: 1em; 67 | padding: 0 10px; 68 | } 69 | 70 | .info-link { 71 | text-decoration: none; 72 | color: var(--green); 73 | padding: 10px; 74 | display: block; 75 | } 76 | 77 | .options { 78 | display: flex; 79 | align-items: center; 80 | justify-content: space-around; 81 | padding: 10px; 82 | border-top: 3px solid var(--red); 83 | border-radius: 3px; 84 | background-color: white; 85 | } 86 | 87 | .options-link { 88 | text-decoration: none; 89 | font-size: 0.9em; 90 | color: var(--red); 91 | } 92 | 93 | section { 94 | border-top: 3px solid var(--red); 95 | border-radius: 3px; 96 | background-color: white; 97 | margin-bottom: 20px; 98 | overflow: hidden; 99 | } 100 | 101 | .section-img { 102 | display: block; 103 | padding: 10px; 104 | margin: 0 auto; 105 | } 106 | 107 | .bigtitle { 108 | padding: 0; 109 | } 110 | 111 | .bigtitle-title { 112 | color: white; 113 | background-color: var(--red); 114 | margin-bottom: 10px; 115 | } 116 | 117 | .bigbottom-link { 118 | background-color: var(--green); 119 | color: white; 120 | } 121 | 122 | .profile { 123 | width: 80%; 124 | border-radius: 50%; 125 | margin-bottom: 10px; 126 | } 127 | 128 | @media (min-width: 620px) { 129 | .options-link { 130 | font-size: 1.4em; 131 | } 132 | } -------------------------------------------------------------------------------- /simple-grid-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello! 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |

Grid into the future

18 |
19 |
20 |
21 |

Hello

22 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae semper quam. Praesent lobortis tellus quis erat condimentum, a bibendum tortor volutpat.

23 |
24 |
25 |
26 | 27 |

28 | Title of article 29 |

30 |
31 |
32 | 33 |

34 | Title of article 35 |

36 |
37 |
38 | 39 |

40 | Title of article 41 |

42 |
43 |
44 | 45 |

46 | Title of article 47 |

48 |
49 |
50 | 51 |

52 | Title of article 53 |

54 |
55 |
56 | 57 |

58 | Title of article 59 |

60 |
61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /card-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello! 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |

Card Layout

15 |
16 | Home 17 | About 18 | Gallery 19 | Blog 20 | References 21 | Contant 22 |
23 |
24 |
25 |
26 |

The Title

27 |

Some Text goes here, some text goes here, some text goes here, some text goes here.

28 | Learn more... 29 |
30 |
31 |

The Title

32 |

Some Text goes here, some text goes here, some text goes here, some text goes here.

33 | important graph 34 | Learn more... 35 |
36 |
37 |

The Title

38 | 39 |

Some Text goes here, some text goes here, some text goes here, some text goes here.

40 | Learn more... 41 |
42 |
43 |

The Title

44 |

Some Text goes here, some text goes here, some text goes here, some text goes here.

45 | Learn more... 46 |
47 |
48 |

The Title

49 |

Some Text goes here, some text goes here, some text goes here, some text goes here.

50 | Learn more... 51 |
52 |
53 |

The Title

54 |

Some Text goes here, some text goes here, some text goes here, some text goes here.

55 | Learn more... 56 |
57 |
58 | 59 | 60 | -------------------------------------------------------------------------------- /full-page-grid-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Hello! 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 18 |
19 |
20 |
21 |

The Title

22 |

Some Text goes here, some text goes here, some text goes here, some text goes here.

23 | Learn more... 24 |
25 |
26 | a kitten 27 |
28 |
29 | a kitten 30 |
31 |
32 | a kitten 33 |
34 |
35 | a kitten 36 |
37 |
38 | a kitten 39 |
40 |
41 | a kitten 42 |
43 |
44 |

The Title

45 |

Some Text goes here, some text goes here, some text goes here, some text goes here.

46 | Learn more... 47 |
48 |
49 | a kitten 50 |
51 |
52 | a kitten 53 |
54 |
55 | 56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /custom-tab-demo/gradlew.bat: -------------------------------------------------------------------------------- 1 | @if "%DEBUG%" == "" @echo off 2 | @rem ########################################################################## 3 | @rem 4 | @rem Gradle startup script for Windows 5 | @rem 6 | @rem ########################################################################## 7 | 8 | @rem Set local scope for the variables with windows NT shell 9 | if "%OS%"=="Windows_NT" setlocal 10 | 11 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 12 | set DEFAULT_JVM_OPTS= 13 | 14 | set DIRNAME=%~dp0 15 | if "%DIRNAME%" == "" set DIRNAME=. 16 | set APP_BASE_NAME=%~n0 17 | set APP_HOME=%DIRNAME% 18 | 19 | @rem Find java.exe 20 | if defined JAVA_HOME goto findJavaFromJavaHome 21 | 22 | set JAVA_EXE=java.exe 23 | %JAVA_EXE% -version >NUL 2>&1 24 | if "%ERRORLEVEL%" == "0" goto init 25 | 26 | echo. 27 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 28 | echo. 29 | echo Please set the JAVA_HOME variable in your environment to match the 30 | echo location of your Java installation. 31 | 32 | goto fail 33 | 34 | :findJavaFromJavaHome 35 | set JAVA_HOME=%JAVA_HOME:"=% 36 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe 37 | 38 | if exist "%JAVA_EXE%" goto init 39 | 40 | echo. 41 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 42 | echo. 43 | echo Please set the JAVA_HOME variable in your environment to match the 44 | echo location of your Java installation. 45 | 46 | goto fail 47 | 48 | :init 49 | @rem Get command-line arguments, handling Windowz variants 50 | 51 | if not "%OS%" == "Windows_NT" goto win9xME_args 52 | if "%@eval[2+2]" == "4" goto 4NT_args 53 | 54 | :win9xME_args 55 | @rem Slurp the command line arguments. 56 | set CMD_LINE_ARGS= 57 | set _SKIP=2 58 | 59 | :win9xME_args_slurp 60 | if "x%~1" == "x" goto execute 61 | 62 | set CMD_LINE_ARGS=%* 63 | goto execute 64 | 65 | :4NT_args 66 | @rem Get arguments from the 4NT Shell from JP Software 67 | set CMD_LINE_ARGS=%$ 68 | 69 | :execute 70 | @rem Setup the command line 71 | 72 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar 73 | 74 | @rem Execute Gradle 75 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS% 76 | 77 | :end 78 | @rem End local scope for the variables with windows NT shell 79 | if "%ERRORLEVEL%"=="0" goto mainEnd 80 | 81 | :fail 82 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of 83 | rem the _cmd.exe /c_ return code! 84 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1 85 | exit /b 1 86 | 87 | :mainEnd 88 | if "%OS%"=="Windows_NT" endlocal 89 | 90 | :omega 91 | -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/java/com/example/samsunginternet/customtabdemo/customtab/CustomTabHelper.java: -------------------------------------------------------------------------------- 1 | package com.example.samsunginternet.customtabdemo.customtab; 2 | 3 | import android.content.Context; 4 | import android.content.Intent; 5 | import android.content.pm.PackageManager; 6 | import android.content.pm.ResolveInfo; 7 | import android.net.Uri; 8 | import android.text.TextUtils; 9 | 10 | import java.util.ArrayList; 11 | import java.util.List; 12 | 13 | import static android.support.customtabs.CustomTabsService.ACTION_CUSTOM_TABS_CONNECTION; 14 | 15 | /** 16 | * Simplified version based on the CustomTabsHelper from: 17 | * https://github.com/GoogleChrome/custom-tabs-client 18 | * Copyright Google Inc. Licence: http://www.apache.org/licenses/LICENSE-2.0 19 | */ 20 | public class CustomTabHelper { 21 | 22 | public static String getPackageNameToUse(Context context, String urlToLoad) { 23 | 24 | PackageManager pm = context.getPackageManager(); 25 | 26 | // Get default VIEW intent handler 27 | Intent activityIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(urlToLoad)); 28 | ResolveInfo defaultViewHandlerInfo = pm.resolveActivity(activityIntent, 0); 29 | 30 | String defaultViewHandlerPackageName = null; 31 | 32 | if (defaultViewHandlerInfo != null) { 33 | defaultViewHandlerPackageName = defaultViewHandlerInfo.activityInfo.packageName; 34 | } 35 | 36 | // Get all apps that can handle VIEW intents 37 | List resolvedActivityList = pm.queryIntentActivities(activityIntent, 0); 38 | List packagesSupportingCustomTabs = new ArrayList<>(); 39 | 40 | for (ResolveInfo info : resolvedActivityList) { 41 | Intent serviceIntent = new Intent(); 42 | serviceIntent.setAction(ACTION_CUSTOM_TABS_CONNECTION); 43 | serviceIntent.setPackage(info.activityInfo.packageName); 44 | if (pm.resolveService(serviceIntent, 0) != null) { 45 | packagesSupportingCustomTabs.add(info.activityInfo.packageName); 46 | } 47 | } 48 | 49 | // Now our list contains all apps that can handle both VIEW intents & service calls 50 | if (packagesSupportingCustomTabs.size() > 0) { 51 | 52 | if (!TextUtils.isEmpty(defaultViewHandlerPackageName) && 53 | packagesSupportingCustomTabs.contains(defaultViewHandlerPackageName)) { 54 | // Prefer the defined default 55 | return defaultViewHandlerPackageName; 56 | } else { 57 | // Otherwise just select the first one, to keep this demo simple for now. 58 | // NOTE: If there are multiple options, it would probably be better to ask the user 59 | // to decide which app to use. See Andre Bandarra's Best Practices guide: 60 | // https://medium.com/google-developers/best-practices-for-custom-tabs-5700e55143ee 61 | return packagesSupportingCustomTabs.get(0); 62 | } 63 | } 64 | 65 | return null; 66 | } 67 | 68 | } 69 | -------------------------------------------------------------------------------- /payment-request-demo-simple/index.js: -------------------------------------------------------------------------------- 1 | // UI elements 2 | var donateSection = document.getElementById('donate'); 3 | var donateButton = document.getElementById('donate-button'); 4 | var unsupportedMsg = document.getElementById('unsupported'); 5 | var successMsg = document.getElementById('success'); 6 | var errorMsg = document.getElementById('error'); 7 | 8 | /** 9 | * Configuration for our payment. Notes: 10 | * - basic-card: We're taking a card payment. Other options may come in the future. 11 | * - We duplicate the payment network names in supportedMethods, to support older format (Samsung Internet v5.0) 12 | * - The spec includes 'supportedTypes' (credit/debit/prepaid) but this does not have browser support yet 13 | * - These are example payment networks. Others are available! See: 14 | * https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/#methoddata-parameter 15 | */ 16 | var methodData = [{ 17 | supportedMethods: ['basic-card', 'visa', 'mastercard', 'amex'], 18 | data: { 19 | supportedNetworks: ['visa', 'mastercard', 'amex'] 20 | } 21 | }]; 22 | 23 | var details = {total: {label: 'Test payment', amount: {currency: 'GBP', value: '1.00'}}}; 24 | 25 | // Check that the Payment Request API is available on this device 26 | if (window.PaymentRequest) { 27 | // Show donate button 28 | donateSection.style.display = 'block'; 29 | unsupportedMsg.style.display = 'none'; 30 | } 31 | else { 32 | // Show unsupported message 33 | donateSection.style.display = 'none'; 34 | unsupportedMsg.style.display = 'block'; 35 | } 36 | 37 | /** 38 | * Here is where we would send the payment info to the server / payment gateway for processing, 39 | * but I'm not quite ready to take real money from you yet 😉 Simulating by just waiting 2 secs. 40 | */ 41 | function processPaymentDetails(uiResult) { 42 | return new Promise(function (resolve) { 43 | setTimeout(function() { 44 | resolve(uiResult); 45 | }, 2000); 46 | }); 47 | } 48 | 49 | function showSuccess() { 50 | donateButton.style.display = 'none'; 51 | errorMsg.style.display = 'none'; 52 | successMsg.style.display = 'block'; 53 | } 54 | 55 | function showError() { 56 | donateButton.style.display = 'none'; 57 | errorMsg.style.display = 'block'; 58 | successMsg.style.display = 'none'; 59 | } 60 | 61 | function onDonateButtonClick() { 62 | 63 | // Initialise the PaymentRequest with our configuration 64 | // We could also pass in additional options as a 3rd parameter here, such as: 65 | // {requestShipping: true, requestPayerEmail: true, requestPayerPhone: true}; 66 | var paymentRequest = new PaymentRequest(methodData, details); 67 | 68 | // Show the native UI 69 | paymentRequest.show() 70 | .then(function(uiResult) { 71 | processPaymentDetails(uiResult) 72 | .then(function(uiResult) { 73 | uiResult.complete('success'); 74 | showSuccess(); 75 | }); 76 | }) 77 | .catch(function(error) { 78 | console.warn('Unable to complete purchase', error); 79 | // D'oh. Inform the user the purchase could not be completed... 80 | showError(); 81 | }); 82 | } 83 | 84 | donateButton.addEventListener('click', onDonateButtonClick); 85 | -------------------------------------------------------------------------------- /custom-tab-demo/app/src/main/java/com/example/samsunginternet/customtabdemo/customtab/CustomTabServiceController.java: -------------------------------------------------------------------------------- 1 | package com.example.samsunginternet.customtabdemo.customtab; 2 | 3 | import android.content.ComponentName; 4 | import android.content.Context; 5 | import android.content.Intent; 6 | import android.net.Uri; 7 | import android.os.Binder; 8 | import android.os.Bundle; 9 | import android.support.customtabs.CustomTabsClient; 10 | import android.support.customtabs.CustomTabsServiceConnection; 11 | import android.support.customtabs.CustomTabsSession; 12 | import android.text.TextUtils; 13 | 14 | import java.lang.ref.WeakReference; 15 | 16 | /** 17 | * Based on the example by Sergio R. Angeles: 18 | * https://github.com/sergiorangeles/Android-Custom-Tabs-Example 19 | */ 20 | public class CustomTabServiceController extends CustomTabsServiceConnection { 21 | 22 | private static final String CUSTOM_TABS_EXTRA_SESSION = 23 | "android.support.customtabs.extra.SESSION"; 24 | private static final String CUSTOM_TABS_TOOLBAR_COLOR = 25 | "android.support.customtabs.extra.TOOLBAR_COLOR"; 26 | 27 | private WeakReference contextWeakRef; 28 | private String urlToLoad; 29 | private CustomTabsSession customTabsSession; 30 | 31 | public CustomTabServiceController(Context context, String urlToLoad) { 32 | contextWeakRef = new WeakReference<>(context); 33 | this.urlToLoad = urlToLoad; 34 | } 35 | 36 | @Override 37 | public void onCustomTabsServiceConnected(ComponentName componentName, CustomTabsClient customTabsClient) { 38 | 39 | if (customTabsClient != null) { 40 | 41 | // To make the page load faster (flag argument is reserved for future use) 42 | customTabsClient.warmup(0L); 43 | 44 | // Create a new session 45 | customTabsSession = customTabsClient.newSession(null); 46 | 47 | if (!TextUtils.isEmpty(urlToLoad)) { 48 | Uri uri = Uri.parse(urlToLoad); 49 | if (uri != null && customTabsSession != null) { 50 | // Let session know that it may launch this URL soon, for performance optimisation 51 | customTabsSession.mayLaunchUrl(uri, null, null); 52 | } 53 | } 54 | } 55 | 56 | } 57 | 58 | @Override 59 | public void onServiceDisconnected(ComponentName name) { 60 | customTabsSession = null; 61 | } 62 | 63 | public void bindCustomTabService() { 64 | Context ctx = contextWeakRef.get(); 65 | String packageName = CustomTabHelper.getPackageNameToUse(ctx, this.urlToLoad); 66 | if (ctx == null || packageName == null) { 67 | return; 68 | } 69 | CustomTabsClient.bindCustomTabsService(ctx, packageName, this); 70 | } 71 | 72 | public void unbindCustomTabService() { 73 | Context ctx = contextWeakRef.get(); 74 | if (ctx != null) { 75 | ctx.unbindService(this); 76 | } 77 | } 78 | 79 | public Intent createCustomTabIntent(Binder session, int toolbarColor) { 80 | 81 | Context ctx = contextWeakRef.get(); 82 | 83 | Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(urlToLoad)); 84 | 85 | String packageName = CustomTabHelper.getPackageNameToUse(ctx, this.urlToLoad); 86 | 87 | // If custom tab support, otherwise should fallback to simply opening in the browser 88 | if (packageName != null) { 89 | 90 | intent.setPackage(packageName); 91 | 92 | Bundle extras = new Bundle(); 93 | extras.putInt(CUSTOM_TABS_TOOLBAR_COLOR, toolbarColor); 94 | // Used to match session. Even if not used, has to be present with null to launch custom tab 95 | extras.putBinder(CUSTOM_TABS_EXTRA_SESSION, session); 96 | // Add the referrer 97 | extras.putParcelable(Intent.EXTRA_REFERRER, Uri.parse(Intent.URI_ANDROID_APP_SCHEME + "//" + ctx.getPackageName())); 98 | 99 | intent.putExtras(extras); 100 | 101 | } 102 | 103 | return intent; 104 | } 105 | 106 | } 107 | -------------------------------------------------------------------------------- /payment-request-demo-options/index.js: -------------------------------------------------------------------------------- 1 | // UI elements 2 | var donateSection = document.getElementById('donate'); 3 | var donateButton = document.getElementById('donate-button'); 4 | var unsupportedMsg = document.getElementById('unsupported'); 5 | var successMsg = document.getElementById('success'); 6 | var errorMsg = document.getElementById('error'); 7 | 8 | /** 9 | * Configuration for our payment. Notes: 10 | * - basic-card: We're taking a card payment. Other options may come in the future. 11 | * - We duplicate the payment network names in supportedMethods, to support older format (Samsung Internet v5.0) 12 | * - The spec includes 'supportedTypes' (credit/debit/prepaid) but this does not have browser support yet 13 | * - These are example payment networks. Others are available! See: 14 | * https://developers.google.com/web/fundamentals/discovery-and-monetization/payment-request/#methoddata-parameter 15 | */ 16 | var methodData = [{ 17 | supportedMethods: ['basic-card', 'visa', 'mastercard', 'amex'], 18 | data: { 19 | supportedNetworks: ['visa', 'mastercard', 'amex'] 20 | } 21 | }]; 22 | 23 | var details = { 24 | displayItems: [ 25 | { 26 | label: 'Test item', 27 | amount: {currency: 'GBP', value: '0.83'} 28 | }, 29 | { 30 | label: 'Test tax', 31 | amount: {currency: 'GBP', value: '0.17'} 32 | } 33 | ], 34 | total: {label: 'Test payment', amount: {currency: 'GBP', value: '0.99'}}, 35 | // If you include requestShipping then you need at least one shipping option 36 | // NB. If you have multiple options you can handle the selection by adding a 37 | // 'shippingoptionchange' event handler 38 | shippingOptions: [ 39 | { 40 | id: 'free', 41 | label: 'Free shipping', 42 | amount: {currency: 'GBP', value: '0.00'}, 43 | selected: true 44 | } 45 | ] 46 | }; 47 | var options = { 48 | requestPayerName: true, 49 | requestPayerEmail: true, 50 | requestPayerPhone: true, 51 | requestShipping: true, 52 | shippingType: 'delivery' 53 | }; 54 | 55 | var paymentRequest; 56 | 57 | // Check that the Payment Request API is available on this device 58 | if (window.PaymentRequest) { 59 | // Initialise the PaymentRequest with our configuration 60 | paymentRequest = new PaymentRequest(methodData, details, options); 61 | enablePaymentUI(); 62 | } else { 63 | disablePaymentUI(); 64 | } 65 | 66 | function enablePaymentUI() { 67 | donateSection.style.display = 'block'; 68 | unsupportedMsg.style.display = 'none'; 69 | } 70 | 71 | function disablePaymentUI() { 72 | donateSection.style.display = 'none'; 73 | unsupportedMsg.style.display = 'block'; 74 | } 75 | 76 | /** 77 | * Here is where we would send the payment info to the server / payment gateway for processing, 78 | * but I'm not quite ready to take real money from you yet 😉 Simulating by just waiting 2 secs. 79 | */ 80 | function processPaymentDetails(uiResult) { 81 | return new Promise(function (resolve) { 82 | setTimeout(function() { 83 | resolve(uiResult); 84 | }, 2000); 85 | }); 86 | } 87 | 88 | function showSuccess() { 89 | donateButton.style.display = 'none'; 90 | errorMsg.style.display = 'none'; 91 | successMsg.style.display = 'block'; 92 | } 93 | 94 | function showError() { 95 | donateButton.style.display = 'none'; 96 | errorMsg.style.display = 'block'; 97 | successMsg.style.display = 'none'; 98 | } 99 | 100 | function onDonateButtonClick() { 101 | 102 | paymentRequest.addEventListener('shippingaddresschange', function(evt) { 103 | // Omitting for this demo, but we could process any changes to 104 | // e.g. delivery costs, due to the shipping address changing here. 105 | console.log('Shipping address changed', evt); 106 | }); 107 | 108 | // Show the native UI 109 | paymentRequest.show() 110 | .then(function(uiResult) { 111 | processPaymentDetails(uiResult) 112 | .then(function(uiResult) { 113 | uiResult.complete('success'); 114 | showSuccess(); 115 | }); 116 | }) 117 | .catch(function(error) { 118 | console.warn('Unable to complete purchase', error); 119 | // D'oh. Inform the user the purchase could not be completed... 120 | showError(); 121 | }); 122 | } 123 | 124 | donateButton.addEventListener('click', onDonateButtonClick); 125 | -------------------------------------------------------------------------------- /custom-tab-demo/gradlew: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env bash 2 | 3 | ############################################################################## 4 | ## 5 | ## Gradle start up script for UN*X 6 | ## 7 | ############################################################################## 8 | 9 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script. 10 | DEFAULT_JVM_OPTS="" 11 | 12 | APP_NAME="Gradle" 13 | APP_BASE_NAME=`basename "$0"` 14 | 15 | # Use the maximum available, or set MAX_FD != -1 to use that value. 16 | MAX_FD="maximum" 17 | 18 | warn ( ) { 19 | echo "$*" 20 | } 21 | 22 | die ( ) { 23 | echo 24 | echo "$*" 25 | echo 26 | exit 1 27 | } 28 | 29 | # OS specific support (must be 'true' or 'false'). 30 | cygwin=false 31 | msys=false 32 | darwin=false 33 | case "`uname`" in 34 | CYGWIN* ) 35 | cygwin=true 36 | ;; 37 | Darwin* ) 38 | darwin=true 39 | ;; 40 | MINGW* ) 41 | msys=true 42 | ;; 43 | esac 44 | 45 | # Attempt to set APP_HOME 46 | # Resolve links: $0 may be a link 47 | PRG="$0" 48 | # Need this for relative symlinks. 49 | while [ -h "$PRG" ] ; do 50 | ls=`ls -ld "$PRG"` 51 | link=`expr "$ls" : '.*-> \(.*\)$'` 52 | if expr "$link" : '/.*' > /dev/null; then 53 | PRG="$link" 54 | else 55 | PRG=`dirname "$PRG"`"/$link" 56 | fi 57 | done 58 | SAVED="`pwd`" 59 | cd "`dirname \"$PRG\"`/" >/dev/null 60 | APP_HOME="`pwd -P`" 61 | cd "$SAVED" >/dev/null 62 | 63 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar 64 | 65 | # Determine the Java command to use to start the JVM. 66 | if [ -n "$JAVA_HOME" ] ; then 67 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then 68 | # IBM's JDK on AIX uses strange locations for the executables 69 | JAVACMD="$JAVA_HOME/jre/sh/java" 70 | else 71 | JAVACMD="$JAVA_HOME/bin/java" 72 | fi 73 | if [ ! -x "$JAVACMD" ] ; then 74 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME 75 | 76 | Please set the JAVA_HOME variable in your environment to match the 77 | location of your Java installation." 78 | fi 79 | else 80 | JAVACMD="java" 81 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 82 | 83 | Please set the JAVA_HOME variable in your environment to match the 84 | location of your Java installation." 85 | fi 86 | 87 | # Increase the maximum file descriptors if we can. 88 | if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then 89 | MAX_FD_LIMIT=`ulimit -H -n` 90 | if [ $? -eq 0 ] ; then 91 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then 92 | MAX_FD="$MAX_FD_LIMIT" 93 | fi 94 | ulimit -n $MAX_FD 95 | if [ $? -ne 0 ] ; then 96 | warn "Could not set maximum file descriptor limit: $MAX_FD" 97 | fi 98 | else 99 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT" 100 | fi 101 | fi 102 | 103 | # For Darwin, add options to specify how the application appears in the dock 104 | if $darwin; then 105 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\"" 106 | fi 107 | 108 | # For Cygwin, switch paths to Windows format before running java 109 | if $cygwin ; then 110 | APP_HOME=`cygpath --path --mixed "$APP_HOME"` 111 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"` 112 | JAVACMD=`cygpath --unix "$JAVACMD"` 113 | 114 | # We build the pattern for arguments to be converted via cygpath 115 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null` 116 | SEP="" 117 | for dir in $ROOTDIRSRAW ; do 118 | ROOTDIRS="$ROOTDIRS$SEP$dir" 119 | SEP="|" 120 | done 121 | OURCYGPATTERN="(^($ROOTDIRS))" 122 | # Add a user-defined pattern to the cygpath arguments 123 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then 124 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)" 125 | fi 126 | # Now convert the arguments - kludge to limit ourselves to /bin/sh 127 | i=0 128 | for arg in "$@" ; do 129 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -` 130 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option 131 | 132 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition 133 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"` 134 | else 135 | eval `echo args$i`="\"$arg\"" 136 | fi 137 | i=$((i+1)) 138 | done 139 | case $i in 140 | (0) set -- ;; 141 | (1) set -- "$args0" ;; 142 | (2) set -- "$args0" "$args1" ;; 143 | (3) set -- "$args0" "$args1" "$args2" ;; 144 | (4) set -- "$args0" "$args1" "$args2" "$args3" ;; 145 | (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;; 146 | (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;; 147 | (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;; 148 | (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;; 149 | (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;; 150 | esac 151 | fi 152 | 153 | # Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules 154 | function splitJvmOpts() { 155 | JVM_OPTS=("$@") 156 | } 157 | eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS 158 | JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME" 159 | 160 | exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@" 161 | -------------------------------------------------------------------------------- /socks-megastore/after-simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Socks Megastore 6 | 7 | 8 | 9 | 83 | 84 | 85 |
86 |

Socks Megastore

87 |
88 |
89 | 90 |
91 |

A pair of odd socks

92 | 93 | Samsung Internet socks gallery 1 94 | 95 |

Price: £12 · Shipping: £1.50

96 | 97 |

98 | A pair of odd Samsung Internet socks, in variations of purple. 99 |

100 | 101 |
102 |
103 |
104 |

Purchase completed

105 | 106 |

The demonstration purchase is now complete. No information has been exchanged 107 | and no money has actually been taken.

108 |
109 | 110 |
111 | 112 |
113 |

Demo Purposes Only!

114 |
115 | 116 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /socks-megastore/after-options/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Socks Megastore 6 | 7 | 8 | 9 | 83 | 84 | 85 |
86 |

Socks Megastore

87 |
88 |
89 | 90 |
91 |

A pair of odd socks

92 | 93 | Samsung Internet socks gallery 1 94 | 95 |

Price: £12 · Shipping: £1.50

96 | 97 |

98 | A pair of odd Samsung Internet socks, in variations of purple. 99 |

100 | 101 |
102 |
103 |
104 |

Purchase completed

105 | 106 |

The demonstration purchase is now complete. No information has been exchanged 107 | and no money has actually been taken.

108 |
109 | 110 |
111 | 112 |
113 |

Demo Purposes Only!

114 |
115 | 116 | 220 | 221 | 222 | -------------------------------------------------------------------------------- /socks-megastore/before/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Socks Megastore 6 | 7 | 8 | 9 | 75 | 76 | 77 |
78 |

Socks Megastore

79 |
80 |
81 |

Step 1 of 2 - Billing & Shipping Information

82 | 83 |
84 | 85 |

Billing Information

86 |

Please enter the billing address as it appears on your credit card statement.

87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 114 | 115 | 116 | 117 | 118 |
119 | 120 |
121 | 122 |

Contact Information

123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 |
134 | 135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |

Shipping Options

143 | 144 |
145 | 146 | 147 |
148 | 149 |
150 | 151 | 152 |
153 | 154 |
155 | 156 | 157 |
158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 176 | 177 | 178 | 179 | 180 | 184 | 185 |

Shipping policy

186 | 187 |
188 | 189 |

Step 2 of 2 - Payment Information

190 | 191 |
192 | 193 |

Credit Card Information

194 | 195 |
196 | 197 | 198 |
199 | 200 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 219 | 220 | 223 | 224 |

Summary of terms and conditions

225 | 226 |
227 | 228 |
229 | 230 |

Your order summary

231 | 232 |

Please review your Order Summary below before placing your order

233 | 234 |

Shopping bag (1 item)

235 |

Billing address

236 |

Contact information

237 |

Shipping address

238 |

Shipping method

239 | 240 |
241 | 242 |
243 | 244 |
245 | 246 | --------------------------------------------------------------------------------