Adding logo
После Ширина: | Высота: | Размер: 7.2 KiB |
После Ширина: | Высота: | Размер: 8.8 KiB |
После Ширина: | Высота: | Размер: 2.1 KiB |
После Ширина: | Высота: | Размер: 2.3 KiB |
После Ширина: | Высота: | Размер: 3.2 KiB |
После Ширина: | Высота: | Размер: 4.3 KiB |
После Ширина: | Высота: | Размер: 5.4 KiB |
После Ширина: | Высота: | Размер: 5.8 KiB |
После Ширина: | Высота: | Размер: 7.2 KiB |
После Ширина: | Высота: | Размер: 7.8 KiB |
После Ширина: | Высота: | Размер: 9.4 KiB |
После Ширина: | Высота: | Размер: 2.6 KiB |
После Ширина: | Высота: | Размер: 2.7 KiB |
После Ширина: | Высота: | Размер: 3.2 KiB |
После Ширина: | Высота: | Размер: 3.5 KiB |
После Ширина: | Высота: | Размер: 9.3 KiB |
После Ширина: | Высота: | Размер: 9.3 KiB |
|
@ -0,0 +1,2 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
|
|
@ -30,7 +30,7 @@ header .wrapper {
|
|||
}
|
||||
|
||||
header .titles {
|
||||
background-image: url('../icons/progressive.svg');
|
||||
background-image: url('../icons/progressive-hq.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: left center;
|
||||
background-size: 120px;
|
||||
|
@ -50,7 +50,6 @@ header h1 {
|
|||
header h2 {
|
||||
color: #d1d2d3;
|
||||
font-size: 1.7rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
header strong {
|
||||
|
@ -79,8 +78,8 @@ input {
|
|||
padding: 0.5rem 0.5rem 0.5rem 2rem;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
max-width: 1020px;
|
||||
width: 80ex;
|
||||
max-width: 900px;
|
||||
width: 70ex;
|
||||
font-size: 1.1rem;
|
||||
background-image: url('../icons/search.svg');
|
||||
background-repeat: no-repeat;
|
||||
|
|
После Ширина: | Высота: | Размер: 1.3 KiB |
После Ширина: | Высота: | Размер: 1.9 KiB |
После Ширина: | Высота: | Размер: 4.3 KiB |
После Ширина: | Высота: | Размер: 1.1 KiB |
После Ширина: | Высота: | Размер: 8.8 KiB |
|
@ -0,0 +1,128 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,500,300,300italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<title>Progressive Web Apps HQ</title>
|
||||
<meta name="description" content="Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you." />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="blueprint">
|
||||
<div class="wrapper">
|
||||
<section class="titles">
|
||||
<h1>Progressive Web Apps <strong>HQ</strong></h1>
|
||||
<h2>The <strong>Web</strong> is the platform</h2>
|
||||
</section>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="about.html">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<form>
|
||||
<input type="search" placeholder="Search HQ" />
|
||||
</form>
|
||||
</header>
|
||||
<section class="main">
|
||||
<div class="wrapper">
|
||||
<h2>Features</h2>
|
||||
<p>Progressive Web Applications are like good old web sites but <strong>better</strong>. In a modern browser they exhibit <strong>super–powers</strong> and become…</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<div class="icon network-independent"></div>
|
||||
<h3 id="network-independent">Network Independent</h3>
|
||||
<p>Work offline or on low quality networks.</p>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon re-engagement"></div>
|
||||
<h3 id="re-engageable">Re-engageable</h3>
|
||||
<p>Make engagement easy by drawing user attention.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon discoverable"></div>
|
||||
<h3 id="discoverable">Discoverable</h3>
|
||||
<p>Are identifiable as <em>applications</em> and search engines can find them.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon progressive"></div>
|
||||
<h3 id="progressive">Progressive</h3>
|
||||
<p>Work for every user, regardless of browser choice.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon responsive"></div>
|
||||
<h3 id="responsive">Responsive</h3>
|
||||
<p>Fit any form factor: desktop, mobile, tablet, or whatever is next.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon fresh"></div>
|
||||
<h3 id="fresh">Fresh</h3>
|
||||
<p>Always up-to-date.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon safe"></div>
|
||||
<h3 id="safe">Safe</h3>
|
||||
<p>Served to prevent snooping and ensure content hasn’t been tampered with.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon installable"></div>
|
||||
<h3 id="installable">Installable</h3>
|
||||
<p>Keep user's most useful app on their home screen without the hassle of an app store.</p>
|
||||
</li>
|
||||
<li>
|
||||
<div class="icon linkable"></div>
|
||||
<h3 id="linkable">Linkable</h3>
|
||||
<p>Easily share via URL and not require complex installation.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<h2>Technologies</h2>
|
||||
<p>Progressive Web Applications use the correct set of <strong>technologies</strong> to leverage UX in the Web…</p>
|
||||
<ul>
|
||||
<li>
|
||||
<h3 id="Service Workers">Service Workers</h3>
|
||||
<p>Cache network resources and enable <strong>super fast</strong> access to them.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3 id="Web Application Manifest">Web Application Manifest</h3>
|
||||
<p>Distribute your applications through the ultimate platform: the Web.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3 id="Push API">Push API</h3>
|
||||
<p>Stand your application out and draw the user attention.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3 id="Add to homescreen">Add to homescreen</h3>
|
||||
<p>Allow the web application to become a first-class citizen in your device.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3 id="Background Sync">Background Sync</h3>
|
||||
<p>Perform tasks on regaining connection.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3 id="App Shell">App Shell</h3>
|
||||
<p>Use app shell architecture to reach almost instant first draw.</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3 id="Media Query">Media Query</h3>
|
||||
<p>Adapt your design to bring the best user experience.</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<footer>
|
||||
<div class="wrapper">
|
||||
<p class="license">
|
||||
Content available under a <a href="http://mozilla.org/en-US/foundation/licensing/website-content/" target="_blank">Creative Commons license</a>.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a id="link-repo" href="https://github.com/mozilla/progressive-apps-hq/">View source</a></li>
|
||||
<li><a id="link-issue" href="https://github.com/mozilla/progressive-apps-hq/issues/new">Submit feedback</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
|
@ -0,0 +1,149 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="29.77286mm"
|
||||
height="15.556004mm"
|
||||
viewBox="0 0 105.49439 55.119698"
|
||||
id="svg154683"
|
||||
version="1.1"
|
||||
inkscape:version="0.91 r13725"
|
||||
sodipodi:docname="progressive-hq.svg"
|
||||
inkscape:export-filename="/Users/salva/workspace/progressive-apps-hq/favicon.png"
|
||||
inkscape:export-xdpi="218.39999"
|
||||
inkscape:export-ydpi="218.39999">
|
||||
<defs
|
||||
id="defs154685">
|
||||
<inkscape:perspective
|
||||
sodipodi:type="inkscape:persp3d"
|
||||
inkscape:vp_x="0 : 27.559849 : 1"
|
||||
inkscape:vp_y="0 : 1000 : 0"
|
||||
inkscape:vp_z="105.49439 : 27.559849 : 1"
|
||||
inkscape:persp3d-origin="52.747195 : 18.373233 : 1"
|
||||
id="perspective178450" />
|
||||
<symbol
|
||||
id="symbol167118">
|
||||
<title
|
||||
id="title167120">Chevron Right</title>
|
||||
<path
|
||||
d="M 20,12 17.17,14.83 26.34,24 17.17,33.17 20,36 32,24 Z"
|
||||
style="stroke:none"
|
||||
id="path167122"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
<symbol
|
||||
id="symbol167112">
|
||||
<title
|
||||
id="title167114">Chevron Left</title>
|
||||
<path
|
||||
d="M 30.83,14.83 28,12 16,24 28,36 30.83,33.17 21.66,24 Z"
|
||||
style="stroke:none"
|
||||
id="path167116"
|
||||
inkscape:connector-curvature="0" />
|
||||
</symbol>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="2.8"
|
||||
inkscape:cx="-12.592924"
|
||||
inkscape:cy="59.533682"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
showguides="true"
|
||||
inkscape:guide-bbox="true"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1391"
|
||||
inkscape:window-x="1280"
|
||||
inkscape:window-y="1"
|
||||
inkscape:window-maximized="1"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0">
|
||||
<sodipodi:guide
|
||||
position="27.363835,41.539296"
|
||||
orientation="1,0"
|
||||
id="guide178241" />
|
||||
<sodipodi:guide
|
||||
position="0.042405176,27.610726"
|
||||
orientation="0.70710671,-0.70710685"
|
||||
id="guide178323" />
|
||||
<sodipodi:guide
|
||||
position="6.7857143,-20.357147"
|
||||
orientation="-0.70710677,0.70710679"
|
||||
id="guide178325" />
|
||||
<sodipodi:guide
|
||||
position="67.720983,33.503586"
|
||||
orientation="1,0"
|
||||
id="guide178327" />
|
||||
<sodipodi:guide
|
||||
position="-10.714287,-23.571432"
|
||||
orientation="0.70710708,-0.70710648"
|
||||
id="guide178329" />
|
||||
<sodipodi:guide
|
||||
position="94.863843,27.610726"
|
||||
orientation="-0.70710715,0.70710641"
|
||||
id="guide178331" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata154688">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Capa 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-54.42188,-423.96038)">
|
||||
<text
|
||||
xml:space="preserve"
|
||||
style="font-style:normal;font-weight:normal;font-size:45px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
x="111.42857"
|
||||
y="460.93362"
|
||||
id="text172931"
|
||||
sodipodi:linespacing="125%"><tspan
|
||||
sodipodi:role="line"
|
||||
id="tspan172933"
|
||||
x="111.42857"
|
||||
y="460.93362"
|
||||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:45px;line-height:125%;font-family:Raanana;-inkscape-font-specification:'Raanana, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start" /></text>
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#f0f0f0;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000006;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="m 122.06053,424.79492 -40.3807,39.95117 -13.150533,-13.20117 13.150533,-13.33036 0,-14.25418 -27.25795,27.47126 27.25795,27.46289 40.3807,-40.08594 13.06056,12.73633 -13.06056,13.37277 0,14.16239 27.21288,-27.64844 z"
|
||||
id="path178245"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccccccccc" />
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#969696;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="m 126.42047,424.37765 -40.380691,39.95117 0,14.14844 40.380691,-40.08594 13.06056,12.73633 -13.06056,13.37277 0,14.16239 27.21289,-27.64844 z"
|
||||
id="path178245-6"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccccc" />
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#333333;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.00000012;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="m 130.42047,424.37765 0,14.01367 13.06056,12.73633 -13.06056,13.37277 0,14.16239 27.2129,-27.64844 z"
|
||||
id="path178245-6-5"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="ccccccc" />
|
||||
</g>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 8.1 KiB |
20
index.html
|
@ -7,6 +7,24 @@
|
|||
<title>Progressive Web Apps HQ</title>
|
||||
<meta name="description" content="Discover Progressive Web Applications, the new way for making most out of your web sites. Check if the Web is the ultimate platform for you." />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
|
||||
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
|
||||
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
|
||||
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
|
||||
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="msapplication-TileColor" content="#ffffff">
|
||||
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
@ -32,7 +50,7 @@
|
|||
<p>Progressive Web Applications are like good old web sites but <strong>better</strong>. In a modern browser they exhibit <strong>super–powers</strong> and become…</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#" target="_blank">
|
||||
<a href="features/network-independant.html">
|
||||
<div class="icon network-independent"></div>
|
||||
<h3 id="network-independent">Network Independent</h3>
|
||||
<p>Work offline or on low quality networks.</p>
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"name": "App",
|
||||
"icons": [
|
||||
{
|
||||
"src": "\/android-icon-36x36.png",
|
||||
"sizes": "36x36",
|
||||
"type": "image\/png",
|
||||
"density": "0.75"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-48x48.png",
|
||||
"sizes": "48x48",
|
||||
"type": "image\/png",
|
||||
"density": "1.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-72x72.png",
|
||||
"sizes": "72x72",
|
||||
"type": "image\/png",
|
||||
"density": "1.5"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-96x96.png",
|
||||
"sizes": "96x96",
|
||||
"type": "image\/png",
|
||||
"density": "2.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-144x144.png",
|
||||
"sizes": "144x144",
|
||||
"type": "image\/png",
|
||||
"density": "3.0"
|
||||
},
|
||||
{
|
||||
"src": "\/android-icon-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image\/png",
|
||||
"density": "4.0"
|
||||
}
|
||||
]
|
||||
}
|
После Ширина: | Высота: | Размер: 7.2 KiB |
После Ширина: | Высота: | Размер: 7.7 KiB |
После Ширина: | Высота: | Размер: 21 KiB |
После Ширина: | Высота: | Размер: 3.2 KiB |