Add some additional demo content to webkit.org
authorwenson_hsieh@apple.com <wenson_hsieh@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 May 2018 23:37:44 +0000 (23:37 +0000)
committerwenson_hsieh@apple.com <wenson_hsieh@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Tue, 22 May 2018 23:37:44 +0000 (23:37 +0000)
https://bugs.webkit.org/show_bug.cgi?id=185892

Reviewed by Tim Horton.

Adds three demo pages, and some placeholder assets.

* demos/extrazoom/article/constitution.jpg: Added.
* demos/extrazoom/article/index.html: Added.
* demos/extrazoom/login/index.html: Added.
* demos/extrazoom/login/webkit.svg: Added.
* demos/extrazoom/recipes/butterchicken.jpg: Added.
* demos/extrazoom/recipes/chowder.jpg: Added.
* demos/extrazoom/recipes/hummus.jpg: Added.
* demos/extrazoom/recipes/index.html: Added.
* demos/extrazoom/recipes/padthai.jpg: Added.
* demos/extrazoom/recipes/pizza.jpg: Added.
* demos/extrazoom/recipes/salmon.jpg: Added.
* demos/extrazoom/recipes/steak.jpg: Added.
* demos/extrazoom/recipes/tacos.jpg: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@232084 268f45cc-cd09-0410-ab3c-d52691b4dbfc

14 files changed:
Websites/webkit.org/ChangeLog
Websites/webkit.org/demos/extrazoom/article/constitution.jpg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/article/index.html [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/login/index.html [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/login/webkit.svg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/butterchicken.jpg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/chowder.jpg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/hummus.jpg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/index.html [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/padthai.jpg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/pizza.jpg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/salmon.jpg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/steak.jpg [new file with mode: 0644]
Websites/webkit.org/demos/extrazoom/recipes/tacos.jpg [new file with mode: 0644]

index 41d862d..568f6f7 100644 (file)
@@ -1,3 +1,26 @@
+2018-05-22  Wenson Hsieh  <wenson_hsieh@apple.com>
+
+        Add some additional demo content to webkit.org
+        https://bugs.webkit.org/show_bug.cgi?id=185892
+
+        Reviewed by Tim Horton.
+
+        Adds three demo pages, and some placeholder assets.
+
+        * demos/extrazoom/article/constitution.jpg: Added.
+        * demos/extrazoom/article/index.html: Added.
+        * demos/extrazoom/login/index.html: Added.
+        * demos/extrazoom/login/webkit.svg: Added.
+        * demos/extrazoom/recipes/butterchicken.jpg: Added.
+        * demos/extrazoom/recipes/chowder.jpg: Added.
+        * demos/extrazoom/recipes/hummus.jpg: Added.
+        * demos/extrazoom/recipes/index.html: Added.
+        * demos/extrazoom/recipes/padthai.jpg: Added.
+        * demos/extrazoom/recipes/pizza.jpg: Added.
+        * demos/extrazoom/recipes/salmon.jpg: Added.
+        * demos/extrazoom/recipes/steak.jpg: Added.
+        * demos/extrazoom/recipes/tacos.jpg: Added.
+
 2018-04-26  Ross Kirsling  <ross.kirsling@sony.com>
 
         Update code style guidelines to mention braced initialization style.
diff --git a/Websites/webkit.org/demos/extrazoom/article/constitution.jpg b/Websites/webkit.org/demos/extrazoom/article/constitution.jpg
new file mode 100644 (file)
index 0000000..ffa46c2
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/article/constitution.jpg differ
diff --git a/Websites/webkit.org/demos/extrazoom/article/index.html b/Websites/webkit.org/demos/extrazoom/article/index.html
new file mode 100644 (file)
index 0000000..9162215
--- /dev/null
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="utf8">
+<meta property="og:title" content="The philosophy of liberty">
+<meta property="og:type" content="article">
+<meta property="og:description" content="An essay about our founding fathers">
+<meta property="og:image" content="https://webkit.org/demos/extrazoom/article/constitution.jpg">
+<meta property="og:image:width" content="300px">
+<meta property="og:image:height" content="200px">
+<html>
+<style>
+    body {
+        font-family: system-ui;
+    }
+
+    img {
+        width: calc(min(50vw, 300px));
+    }
+</style>
+<body>
+    <article>
+        <h1 itemprop="title">The philosophy of liberty</h1>
+        <h2 itemprop="subheading">An essay about our founding fathers</h2>
+        <h3 itemprop="author">Johnny Appleseed</h3>
+        <time itemprop="pubdate" datetime="2018-04-01">April 1, 2018</time>
+        <p><strong>Our Founding Fathers’</strong> <em>experiences emphasized the importance they placed on rights and limited government.</em> With few checks on authority, Britain imposed heavy taxes on colonists after the Seven Years War, a change from previous salutary neglect. The colonists’ protests emphasized their preexisting need for individual freedom and limited government.</p>
+        <p>As political author Joel Barlow discussed in his 1792 pamphlet “Advice to the Privileged Orders in the Several States of Europe”, the individual cultural mindsets of the colonists defined the rights they demanded from their government. Colonial experiences did not change the Founders’ views as much as it legitimized their belief in individual rights already established during times of salutary neglect.</p>
+        <figure>
+            <img src="constitution.jpg" alt="The U.S. constitution"></img>
+            <figcaption>The U.S. constitution</figcaption>
+        </figure>
+        <blockquote>In Europe, charters of liberty have been granted by power. America has set the example of charters of power granted by liberty. <cite><em>James Madison, 1792.</em></cite></blockquote>
+        <p>In Massachusetts, the colonists faced severe oppression under the Boston Harbor Act and therefore incorporated the idea that &ldquo;all men are born free and equal&rdquo; in Article 1 of their Constitution. British oppression taught the citizens of Massachusetts to value both their natural rights and the ideals in their Constitution, prompting juries to abolish slavery through cases like Bett v. Freeman (1781).</p>
+    </article>
+<body>
+</html>
diff --git a/Websites/webkit.org/demos/extrazoom/login/index.html b/Websites/webkit.org/demos/extrazoom/login/index.html
new file mode 100644 (file)
index 0000000..ddababd
--- /dev/null
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="utf8">
+<meta property="og:title" content="Generic login example">
+<html>
+<head>
+    <style>
+    body {
+        width: 100%;
+        margin: 0;
+        padding-top: 1em;
+        text-align: center;
+        font-family: system-ui;
+    }
+
+    #logo {
+        width: calc(min(80px, 20vw));
+    }
+
+    h1 {
+        margin-top: 0;
+        font-weight: 350;
+        font-size: 1.5em;
+    }
+
+    input {
+        width: calc(min(90%, 320px));
+        background-color: #EEE;
+        height: 2.4em;
+        margin: 0.5em auto;
+        font-size: 1.2em;
+        border: none;
+        border-radius: 1.2em;
+        -webkit-appearance: none;
+        box-sizing: border-box;
+        padding: 0 1em;
+        outline: none;
+        display: block;
+    }
+
+    input[type="submit"] {
+        color: white;
+        background-color: rgb(90, 200, 250);
+    }
+
+    input + input {
+        margin-top: 1em;
+    }
+
+    a {
+        font-size: 0.8em;
+    }
+
+    #links {
+        margin-top: 1em;
+    }
+
+    #links > a {
+        color: rgb(0, 122, 255);
+        text-decoration: none;
+    }
+    </style>
+</head>
+<body>
+    <img id="logo" src="webkit.svg"></img>
+    <form action="index.html" method="post">
+        <input aria-label="Email Address" type="email" placeholder="Email"></input>
+        <input aria-label="Password" type="password" placeholder="Password"></input>
+        <input type="submit" value="Log in"></input>
+    </form>
+    <div id="links">
+        <a href="#">Sign up</a>
+        <span>&nbsp;•&nbsp;</span>
+        <a href="#">Forgot your password?</a>
+    </div>
+</body>
+</html>
diff --git a/Websites/webkit.org/demos/extrazoom/login/webkit.svg b/Websites/webkit.org/demos/extrazoom/login/webkit.svg
new file mode 100644 (file)
index 0000000..6f760ac
--- /dev/null
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Copyright © 2015 Apple Inc. All rights reserved. -->
+<svg viewBox="0 0 510 552" version="1.1" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="blues">
+            <stop stop-color="#34AADC" offset="0%"/>
+            <stop stop-color="#007AFF" offset="100%"/>
+        </linearGradient>
+        <filter x="-50%" y="-50%" width="200%" height="200%" id="shadow">
+            <feOffset dx="0" dy="5" in="SourceAlpha" result="offset"/>
+            <feGaussianBlur stdDeviation="2.5" in="offset" result="blur"/>
+            <feColorMatrix values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.07 0" in="blur" type="matrix" result="matrix"/>
+            <feMerge>
+                <feMergeNode in="matrix"/>
+                <feMergeNode in="SourceGraphic"/>
+            </feMerge>
+        </filter>
+    </defs>
+    <path d="M 477.861111 306.92819 C 512.046296 333.587507 512.046296 377.446382 477.861111 404.320693 L 317.015432 530.737452 C 282.830247 557.396768 227.169753 557.396768 192.984568 530.737452 L 32.1388889 404.535688 C -2.0462963 377.876371 -2.0462963 334.017496 32.1388889 307.143185 L 192.984568 180.726426 C 227.169753 154.06711 282.830247 154.06711 317.015432 180.726426 L 477.861111 306.92819 Z" fill="rgb(255, 157, 0)" id="base"/>
+    <path d="M 193.370239 451.831773 L 31.8122232 324.860059 C 15.5243578 312.097996 6.5 295.009809 6.5 276.840092 C 6.5 258.670375 15.5243578 241.582189 31.8122232 228.820125 L 193.370239 101.632105 C 209.658105 88.8700422 231.668733 81.7319391 255 81.7319391 C 278.331267 81.7319391 300.121789 88.8700422 316.629761 101.632105 L 478.187777 228.603819 C 494.475642 241.365882 503.5 258.454069 503.5 276.623786 C 503.5 294.793503 494.475642 311.881689 478.187777 324.643753 L 316.629761 451.615467 C 300.121789 464.593836 278.331267 471.731939 255 471.731939 C 231.668733 471.731939 209.878211 464.593836 193.370239 451.831773 Z" fill="rgba(0, 0, 0, 0.1)" filter="url(#shadow)" id="mid-shadow"/>
+    <path d="M 193.370239 451.831773 L 31.8122232 324.860059 C 15.5243578 312.097996 6.5 295.009809 6.5 276.840092 C 6.5 258.670375 15.5243578 241.582189 31.8122232 228.820125 L 193.370239 101.632105 C 209.658105 88.8700422 231.668733 81.7319391 255 81.7319391 C 278.331267 81.7319391 300.121789 88.8700422 316.629761 101.632105 L 478.187777 228.603819 C 494.475642 241.365882 503.5 258.454069 503.5 276.623786 C 503.5 294.793503 494.475642 311.881689 478.187777 324.643753 L 316.629761 451.615467 C 300.121789 464.593836 278.331267 471.731939 255 471.731939 C 231.668733 471.731939 209.878211 464.593836 193.370239 451.831773 Z" fill="rgb(255, 204, 0)" id="mid"/>
+    <path d="M 193.370239 371.831773 L 31.8122232 244.860059 C 15.5243578 232.097996 6.5 215.009809 6.5 196.840092 C 6.5 178.670375 15.5243578 161.582189 31.8122232 148.820125 L 193.370239 21.6321055 C 209.658105 8.87004222 231.668733 1.73193906 255 1.73193906 C 278.331267 1.73193906 300.121789 8.87004222 316.629761 21.6321055 L 478.187777 148.603819 C 494.475642 161.365882 503.5 178.454069 503.5 196.623786 C 503.5 214.793503 494.475642 231.881689 478.187777 244.643753 L 316.629761 371.615467 C 300.121789 384.593836 278.331267 391.731939 255 391.731939 C 231.668733 391.731939 209.878211 384.593836 193.370239 371.831773 Z" fill="rgba(0, 0, 0, 0.1)" filter="url(#shadow)" id="top-shadow"/>
+    <path d="M 193.370239 371.831773 L 31.8122232 244.860059 C 15.5243578 232.097996 6.5 215.009809 6.5 196.840092 C 6.5 178.670375 15.5243578 161.582189 31.8122232 148.820125 L 193.370239 21.6321055 C 209.658105 8.87004222 231.668733 1.73193906 255 1.73193906 C 278.331267 1.73193906 300.121789 8.87004222 316.629761 21.6321055 L 478.187777 148.603819 C 494.475642 161.365882 503.5 178.454069 503.5 196.623786 C 503.5 214.793503 494.475642 231.881689 478.187777 244.643753 L 316.629761 371.615467 C 300.121789 384.593836 278.331267 391.731939 255 391.731939 C 231.668733 391.731939 209.878211 384.593836 193.370239 371.831773 Z" fill="url(#blues)" id="top"/>
+    <path d="M 255.557796 318.523438 L 255.557796 318.523438 C 338.113251 318.523438 405.03767 263.81823 405.03767 196.335938 C 405.03767 128.853645 338.113251 74.1484375 255.557796 74.1484375 C 173.002341 74.1484375 106.077922 128.853645 106.077922 196.335938 C 106.077922 263.81823 173.002341 318.523438 255.557796 318.523438 L 255.557796 318.523438 Z M 255.557796 331.101563 L 255.557796 331.101563 C 164.503985 331.101563 90.6902879 270.764937 90.6902879 196.335938 C 90.6902879 121.906938 164.503985 61.5703125 255.557796 61.5703125 C 346.611606 61.5703125 420.425304 121.906938 420.425304 196.335938 C 420.425304 270.764937 346.611606 331.101563 255.557796 331.101563 L 255.557796 331.101563 Z" fill="white" id="ring"/>
+    <path d="M 266.575605 248.199383 C 274.839361 247.116964 282.893943 244.813421 290.267395 241.288755 L 337.32129 260.629992 L 312.674012 223.705812 C 325.63867 207.004736 325.63867 185.850561 312.674012 169.149485 L 337.32129 132.225305 L 292.974868 150.45365 L 291.700073 169.952942 C 309.829164 185.157289 309.365846 209.169068 290.527893 223.847168 C 285.721068 227.691529 280.20166 230.389527 274.405151 232.306091 L 266.575605 248.199383 Z M 244.579776 144.624146 C 230.931152 146.398682 220.701293 151.565675 220.701293 151.565675 L 173.690288 132.225305 L 198.337566 169.149485 C 185.372907 185.850561 185.372907 207.004736 198.337566 223.705812 L 173.690288 260.629992 L 219.248736 241.90345 L 220.218932 223.640565 C 201.161804 208.480714 201.314025 184.227967 220.529419 169.002319 C 224.999999 165.000001 235.105895 160.762757 236.622498 160.537354 C 236.622497 160.537354 244.579776 144.624146 244.579776 144.624146 Z" fill="rgb(140, 200, 246)" id="rosette"/>
+    <path d="M 232.944378 192.304563 L 226.682617 303.302063 L 277.389053 200.3587 L 284.649978 89.5703125 L 232.944378 192.304563 Z M 232.289215 281.968558 L 272.904208 199.563458 L 237.312925 193.069439 L 232.289215 281.968558 Z" fill="white" fill-rule="evenodd" id="needle"/>
+</svg>
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/butterchicken.jpg b/Websites/webkit.org/demos/extrazoom/recipes/butterchicken.jpg
new file mode 100644 (file)
index 0000000..c62df75
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/recipes/butterchicken.jpg differ
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/chowder.jpg b/Websites/webkit.org/demos/extrazoom/recipes/chowder.jpg
new file mode 100644 (file)
index 0000000..43bddc4
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/recipes/chowder.jpg differ
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/hummus.jpg b/Websites/webkit.org/demos/extrazoom/recipes/hummus.jpg
new file mode 100644 (file)
index 0000000..a8fd364
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/recipes/hummus.jpg differ
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/index.html b/Websites/webkit.org/demos/extrazoom/recipes/index.html
new file mode 100644 (file)
index 0000000..3b5c2fb
--- /dev/null
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<meta name="disabled-adaptations" content="">
+<meta charset="utf8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta property="og:title" content="Recipes Demo">
+<meta property="og:description" content="My wonderful list of recipes">
+<meta property="og:image" content="https://webkit.org/demos/extrazoom/recipes/salmon.jpg">
+<meta property="og:image:width" content="240px">
+<meta property="og:image:height" content="160px">
+<style>
+    @media (min-width: 320px) {
+        div.column {
+            width: 50%;
+        }
+
+        body {
+            display: flex;
+            background-color: #F0F0F0;
+        }
+
+        div.card {
+            background-color: white;
+            border-bottom: 1px #DDD solid;
+            border-right: 1px #DDD solid;
+        }
+    }
+
+    body, html {
+        margin: 0;
+        width: 100%;
+        -webkit-hyphens: auto;
+        font-family: system-ui;
+    }
+
+    div.column {
+        padding: 0;
+        box-sizing: border-box;
+        break-inside: avoid;
+    }
+
+    div.card {
+        margin: 0.5em 2px;
+        padding: 0.5em;
+        text-align: center;
+        break-inside: avoid;
+    }
+
+    div.card > .divider {
+        margin: 0.5em auto;
+        border-top: 1px rgb(90, 200, 250) solid;
+    }
+
+    div.card > img {
+        width: 100%;
+        display: block;
+    }
+
+    div.description {
+        text-align: left;
+        margin: 0.5em auto;
+        line-height: 1.5;
+    }
+</style>
+<html>
+<body>
+    <div class="column">
+        <div class="card">
+            <strong>Steamed salmon</strong>
+            <div class="divider"></div>
+            <img src="salmon.jpg"></img>
+            <div class="description">An innovative twist on a classic year-round dish. It’s simple, it’s quick, and it’s healthy.</div>
+        </div>
+        <div class="card">
+            <strong>Pizza Margherita</strong>
+            <div class="divider"></div>
+            <img src="pizza.jpg"></img>
+            <div class="description">Learn how to make a traditional Italian pizza.</div>
+        </div>
+        <div class="card">
+            <strong>Grilled steak</strong>
+            <div class="divider"></div>
+            <img src="steak.jpg"></img>
+            <div class="description">Served with home fries and roasted vegetables. A great choice for any occasion.</div>
+        </div>
+        <div class="card">
+            <strong>Traditional Greek hummus</strong>
+            <div class="divider"></div>
+            <img src="hummus.jpg"></img>
+            <div class="description">Perfect for parties and gatherings. Impress your loved ones with this delicious, authentic recipe.</div>
+        </div>
+    </div>
+    <div class="column">
+        <div class="card">
+            <strong>Clam chowder</strong>
+            <div class="divider"></div>
+            <img src="chowder.jpg"></img>
+            <div class="description">This delicious New England chowder is perfect for a cold Winter’s day.</div>
+        </div>
+        <div class="card">
+            <strong>Shrimp tacos</strong>
+            <div class="divider"></div>
+            <img src="tacos.jpg"></img>
+            <div class="description">Avocados, shrimp, and a hint of lime for added zest. A terrific summertime dish.</div>
+        </div>
+        <div class="card">
+            <strong>Pad Thai</strong>
+            <div class="divider"></div>
+            <img src="padthai.jpg"></img>
+            <div class="description">A national dish from Thailand. This traditional recipe is easy, and sure to delight your taste buds.</div>
+        </div>
+        <div class="card">
+            <strong>Butter chicken</strong>
+            <div class="divider"></div>
+            <img src="butterchicken.jpg"></img>
+            <div class="description">A traditional Indian dish with strong, mouthwatering flavors.</div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/padthai.jpg b/Websites/webkit.org/demos/extrazoom/recipes/padthai.jpg
new file mode 100644 (file)
index 0000000..9a1cce1
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/recipes/padthai.jpg differ
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/pizza.jpg b/Websites/webkit.org/demos/extrazoom/recipes/pizza.jpg
new file mode 100644 (file)
index 0000000..084e7d3
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/recipes/pizza.jpg differ
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/salmon.jpg b/Websites/webkit.org/demos/extrazoom/recipes/salmon.jpg
new file mode 100644 (file)
index 0000000..a3dbce8
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/recipes/salmon.jpg differ
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/steak.jpg b/Websites/webkit.org/demos/extrazoom/recipes/steak.jpg
new file mode 100644 (file)
index 0000000..68cd6bb
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/recipes/steak.jpg differ
diff --git a/Websites/webkit.org/demos/extrazoom/recipes/tacos.jpg b/Websites/webkit.org/demos/extrazoom/recipes/tacos.jpg
new file mode 100644 (file)
index 0000000..9be9165
Binary files /dev/null and b/Websites/webkit.org/demos/extrazoom/recipes/tacos.jpg differ