[www-doc] [Git][VideoLAN.org/websites][master] 10 commits: Add features styles
Jean-Baptiste Kempf
gitlab at videolan.org
Wed Jan 20 19:38:34 CET 2016
Jean-Baptiste Kempf pushed to branch master at VideoLAN organization / websites
Commits:
f50327cb by David Loiret at 2016-01-20T19:38:23Z
Add features styles
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
21b72424 by David Loiret at 2016-01-20T19:38:23Z
Add check outline SVG icon
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
8ebd0883 by David Loiret at 2016-01-20T19:38:23Z
vlc page: add main features
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
46bfc740 by David Loiret at 2016-01-20T19:38:23Z
style: add v-align mixin
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
1ee83345 by David Loiret at 2016-01-20T19:38:23Z
home: remove unused additional css & js
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
7dc01290 by David Loiret at 2016-01-20T19:38:23Z
vlc page: improve design of features section
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
b2b408e4 by David Loiret at 2016-01-20T19:38:23Z
Add carousel of 4/3 screenshots
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
4bd87dc4 by David Loiret at 2016-01-20T19:38:23Z
Add more Windows screenshots
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
f60b1cca by David Loiret at 2016-01-20T19:38:23Z
features page: hide AV/filters & AV/outputs
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
a675f8ed by David Loiret at 2016-01-20T19:38:23Z
features page: use Bootstrap responsive layout
Signed-off-by: Jean-Baptiste Kempf <jb at videolan.org>
- - - - -
8 changed files:
- + www.videolan.org/images/icons/check-outline.svg
- www.videolan.org/include/os-specific.php
- www.videolan.org/index.php
- www.videolan.org/js/slick-init.js
- www.videolan.org/style/mixins.scss
- www.videolan.org/style/style.scss
- www.videolan.org/vlc/features.php
- www.videolan.org/vlc/index.php
Changes:
=====================================
www.videolan.org/images/icons/check-outline.svg
=====================================
--- /dev/null
+++ b/www.videolan.org/images/icons/check-outline.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="32" viewBox="0 0 36 32">
+<path fill="#444" d="M30 0l-18 20-6.4-6.4-5.6 6.4 12 12 24-25.6z"></path>
+</svg>
=====================================
www.videolan.org/include/os-specific.php
=====================================
--- a/www.videolan.org/include/os-specific.php
+++ b/www.videolan.org/include/os-specific.php
@@ -352,6 +352,22 @@ function getScreenshots($os) {
array(
"name" => "VLC media player - Windows 7 - Qt Interface",
"src" => "//images.videolan.org/vlc/screenshots/1.0.0/vlc_101_w7_2.jpg"
+ ),
+ array(
+ "name" => "VLC media player - Windows Vista - Qt Interface",
+ "src" => "//images.videolan.org/vlc/screenshots/1.0.0/VLC_Qt4.jpg"
+ ),
+ array(
+ "name" => "VLC media player - Windows 7 - Qt Interface",
+ "src" => "//images.videolan.org/vlc/screenshots/1.0.0/vlc_101_w7_1.jpg"
+ ),
+ array(
+ "name" => "VLC media player - Windows Vista - Skins Interface",
+ "src" => "//images.videolan.org/vlc/screenshots/1.0.0/VLC_Goldneye.jpg"
+ ),
+ array(
+ "name" => "VLC media player - Windows 7 - Qt Interface",
+ "src" => "//images.videolan.org/vlc/screenshots/1.0.0/vlc_101_w7.jpg"
)
),
"linux" => array(
=====================================
www.videolan.org/index.php
=====================================
--- a/www.videolan.org/index.php
+++ b/www.videolan.org/index.php
@@ -4,8 +4,8 @@ $language = "";
$title = _("VLC: Official site - Free multimedia solutions for all OS!");
$body_color = "blue";
$new_design = true;
-$additional_js = array("/js/slimbox2.js", "/js/slick-init.js", "/js/slick.min.js");
-$additional_css = array("/js/css/slimbox2.css", "/style/slick.min.css");
+$additional_js = array("/js/slick-init.js", "/js/slick.min.js");
+$additional_css = array("/style/slick.min.css");
require($_SERVER["DOCUMENT_ROOT"] . "/include/language.php");
require($_SERVER["DOCUMENT_ROOT"] . "/include/header.php");
=====================================
www.videolan.org/js/slick-init.js
=====================================
--- a/www.videolan.org/js/slick-init.js
+++ b/www.videolan.org/js/slick-init.js
@@ -7,11 +7,27 @@ $(document).ready(function() {
autoplaySpeed: 3000,
infinite: true,
responsive: [{
- breakpoint: 767,
+ breakpoint: 768,
settings: {
arrows: false,
autoplay: false
}
}]
});
+
+ $('#content-carousel').slick({
+ centerMode: true,
+ slidesToShow: 8,
+ slidesToScroll: 2,
+ variableWidth: true,
+ responsive: [{
+ breakpoint: 768,
+ settings: {
+ arrows: false,
+ autoplay: false,
+ centerMode: true,
+ slidesToShow: 3
+ }
+ }]
+ });
});
=====================================
www.videolan.org/style/mixins.scss
=====================================
--- a/www.videolan.org/style/mixins.scss
+++ b/www.videolan.org/style/mixins.scss
@@ -26,3 +26,10 @@
bottom: 0;
}
}
+
+ at mixin v-align() {
+ display: inline-block;
+ float: none;
+ vertical-align: middle;
+ margin-right: -4px;
+}
=====================================
www.videolan.org/style/style.scss
=====================================
--- a/www.videolan.org/style/style.scss
+++ b/www.videolan.org/style/style.scss
@@ -943,82 +943,6 @@ img, .normalButton {
font-size: 14px;
}
-/* Media queries */
-
- at media (min-width: 768px) and (max-width: 991px) {
- .center-sm {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- .center-font-sm {
- text-align: center;
- }
- .new-design {
- h1.bigtitle {
- font-size: 36px;
- }
- }
-}
-
- at media (max-width: 767px) {
- .donate2 {
- padding-right: 10px;
- }
- .donate2 button {
- height: 30px;
- padding: 5px;
- }
- .center-xs {
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- .center-font-xs {
- text-align: center;
- }
- .new-design .download-wrapper {
- padding-bottom: 10px;
- .big-vlc-img {
- width: 44px;
- margin: 0 6px 12px -6px;
- }
- h1.bigtitle {
- font-size: 32px;
- }
- .projectDescription {
- font-size: 14px;
- }
- }
- //Fix Bootstrap bug on mobile
- .caret {
- border-top: 4px solid;
- }
- #nonprofitOrganizationDiv2 {
- margin-top: 5px;
- margin-bottom: 5px;
- font-size: 16px;
- }
- .row.reorder-xs {
- @include rotate(180deg);
- }
- .row.reorder-xs > [class*="col-"] {
- @include rotate(-180deg);
- }
- html[dir="rtl"] .row.reorder-xs {
- direction: ltr;
- }
- html[dir="rtl"] .row.reorder-xs {
- direction: ltr;
- }
- html[dir="rtl"] .row.reorder-xs > [class*="col-"] {
- direction: rtl; /* Fix the horizontal alignment */
- }
- .carousel-padding-xs {
- padding: 20px 0 0 0;
- }
-}
-
/* ============================ BOOTSTRAP ADJUSTMENTS =========================== */
.btn {
@@ -1046,10 +970,7 @@ img, .normalButton {
}
.v-align {
- display: inline-block;
- float: none;
- vertical-align: middle;
- margin-right: -4px;
+ @include v-align();
}
/* ============================ VLC Download =========================== */
@@ -1145,3 +1066,165 @@ a.icon {
text-align: center;
padding-top: 10px;
}
+
+.bg-gray {
+ background-color: #f7f7f7;
+}
+
+//Features
+.features {
+ $left: 19px;
+ padding: 50px 15px;
+ h2 {
+ font-size: 26px;
+ margin-bottom: 16px;
+ }
+ p, li, li a {
+ color: rgb(77, 77, 77);
+ font-size: 16px;
+ line-height: 24px;
+ }
+ /*
+ img {
+ margin-top: -30px;
+ }
+ */
+ .feat-margin-left {
+ margin-left: $left;
+ }
+ ul {
+ margin-left: $left;
+ li {
+ margin-bottom: 16px;
+ &:before {
+ content: '';
+ display: inline-block;
+ height: 16px;
+ width: 16px;
+ background-image: url('/images/icons/check-outline.svg');
+ background-size: contain;
+ background-repeat: no-repeat;
+ padding-left: $left;
+ }
+ }
+ }
+}
+
+.screenshot-4-3-responsive {
+ @include aspect-ratio(4, 3);
+ display: inline-block;/* no js */
+ overflow: hidden;
+ margin: 0 5px;
+}
+
+.screenshot-small {
+ width: 120px;
+}
+
+/* Media queries */
+ at media (max-width: 991px) {
+ .features .items {
+ padding-top: 26px;
+ }
+}
+
+ at media (min-width: 992px) and (max-width: 1199px) {
+ .v-align-md {
+ @include v-align();
+ }
+}
+
+ at media (min-width: 1200px) {
+ .v-align-lg {
+ @include v-align();
+ }
+}
+
+ at media (min-width: 768px) and (max-width: 991px) {
+ .center-sm {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .center-font-sm {
+ text-align: center;
+ }
+ .new-design {
+ h1.bigtitle {
+ font-size: 36px;
+ }
+ }
+ .row.reorder-sm {
+ @include rotate(180deg);
+ }
+ .row.reorder-sm > [class*="col-"] {
+ @include rotate(-180deg);
+ }
+ html[dir="rtl"] .row.reorder-sm {
+ direction: ltr;
+ }
+ html[dir="rtl"] .row.reorder-sm {
+ direction: ltr;
+ }
+ html[dir="rtl"] .row.reorder-sm > [class*="col-"] {
+ direction: rtl; /* Fix the horizontal alignment */
+ }
+}
+
+ at media (max-width: 767px) {
+ .donate2 {
+ padding-right: 10px;
+ }
+ .donate2 button {
+ height: 30px;
+ padding: 5px;
+ }
+ .center-xs {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ }
+ .center-font-xs {
+ text-align: center;
+ }
+ .new-design .download-wrapper {
+ padding-bottom: 10px;
+ .big-vlc-img {
+ width: 44px;
+ margin: 0 6px 12px -6px;
+ }
+ h1.bigtitle {
+ font-size: 32px;
+ }
+ .projectDescription {
+ font-size: 14px;
+ }
+ }
+ //Fix Bootstrap bug on mobile
+ .caret {
+ border-top: 4px solid;
+ }
+ #nonprofitOrganizationDiv2 {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ font-size: 16px;
+ }
+ .row.reorder-xs {
+ @include rotate(180deg);
+ }
+ .row.reorder-xs > [class*="col-"] {
+ @include rotate(-180deg);
+ }
+ html[dir="rtl"] .row.reorder-xs {
+ direction: ltr;
+ }
+ html[dir="rtl"] .row.reorder-xs {
+ direction: ltr;
+ }
+ html[dir="rtl"] .row.reorder-xs > [class*="col-"] {
+ direction: rtl; /* Fix the horizontal alignment */
+ }
+ .carousel-padding-xs {
+ padding: 20px 0 0 0;
+ }
+}
=====================================
www.videolan.org/vlc/features.php
=====================================
--- a/www.videolan.org/vlc/features.php
+++ b/www.videolan.org/vlc/features.php
@@ -486,65 +486,66 @@ if(!isset($_GET['fdiv'])) {
$title = "VLC - Features";
$lang = "en";
$menu = array( "vlc", "features" );
+ $new_design = true;
$additional_css = array("/vlc/features.css");
require($_SERVER["DOCUMENT_ROOT"]."/include/header.php");
?>
-
-<h1>VLC playback Features</h1>
-<table class="feature-table">
- <tr>
- <td class="feature-cat-list">
- <!--Categories-->
- <?php
- $cat = "input";
- if (isset($_GET['cat'])) {
- $cat = $_GET['cat'];
- }
-
- function getActiveCat($currentCat) {
- global $cat;
- echo $currentCat == $cat ? 'cat-active' : '';
- }
- ?>
- <a class="feature-cat <?php getActiveCat('input'); ?>" id="cat-input" href="/vlc/features.php?cat=input">Input formats</a>
- <a class="feature-cat <?php getActiveCat('video'); ?>" id="cat-video" href="/vlc/features.php?cat=video">Video formats</a>
- <a class="feature-cat <?php getActiveCat('audio'); ?>" id="cat-audio" href="/vlc/features.php?cat=audio">Audio formats</a>
- <a class="feature-cat <?php getActiveCat('sub'); ?>" id="cat-sub" href="/vlc/features.php?cat=sub">Subtitle/Tag formats</a>
- <a class="feature-cat <?php getActiveCat('av'); ?>" id="cat-av" href="/vlc/features.php?cat=av">A/V outputs</a>
- <a class="feature-cat <?php getActiveCat('filters'); ?>" id="cat-filters" href="/vlc/features.php?cat=filters">A/V filters</a>
- <a class="feature-cat <?php getActiveCat('intf'); ?>" id="cat-intf" href="/vlc/features.php?cat=intf">Interfaces</a>
- <a class="feature-cat <?php getActiveCat('misc'); ?>" id="cat-misc" href="/vlc/features.php?cat=misc">Miscellaneous</a>
- </td>
- <td class="feature-list">
- <div class="feature-div">
- <?php
- if($cat=="input") writeInputFeatures();
- else if($cat=="video") writeVideoFeatures();
- else if($cat=="audio") writeAudioFeatures();
- else if($cat=="sub") writeSubFeatures();
- else if($cat=="av") writeAVFeatures();
- else if($cat=="filters") writeFilterFeatures();
- else if($cat=="intf") writeIntfFeatures();
- else if($cat=="misc") writeMiscFeatures();
- ?>
- </div>
- </td>
- </tr>
- <tr>
- <td></td>
- <td>
- <ul class="feature-icon list-inline">
- <li><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /> = Yes</li>
- <li><img src="http://images.videolan.org/images/features/partial.png" alt="Partial" /> = Partial</li>
- <li><img src="http://images.videolan.org/images/features/cross.png" alt="No" /> = No</li>
- <li><img src="http://images.videolan.org/images/features/untested.png" alt="Untested" /> = Untested</li>
- </ul>
- </td>
- </tr>
-</table>
-<h2>Streaming</h2>
-<p>See the <a href="/streaming-features.html">Streaming features page</a></p>
-<br/>
+<div class="container">
+ <h1>VLC playback Features</h1>
+ <table class="feature-table">
+ <tr>
+ <td class="feature-cat-list">
+ <!--Categories-->
+ <?php
+ $cat = "input";
+ if (isset($_GET['cat'])) {
+ $cat = $_GET['cat'];
+ }
+
+ function getActiveCat($currentCat) {
+ global $cat;
+ echo $currentCat == $cat ? 'cat-active' : '';
+ }
+ ?>
+ <a class="feature-cat <?php getActiveCat('input'); ?>" id="cat-input" href="/vlc/features.php?cat=input">Input formats</a>
+ <a class="feature-cat <?php getActiveCat('video'); ?>" id="cat-video" href="/vlc/features.php?cat=video">Video formats</a>
+ <a class="feature-cat <?php getActiveCat('audio'); ?>" id="cat-audio" href="/vlc/features.php?cat=audio">Audio formats</a>
+ <a class="feature-cat <?php getActiveCat('sub'); ?>" id="cat-sub" href="/vlc/features.php?cat=sub">Subtitle/Tag formats</a>
+ <!--<a class="feature-cat <?php getActiveCat('av'); ?>" id="cat-av" href="/vlc/features.php?cat=av">A/V outputs</a>-->
+ <!--<a class="feature-cat <?php getActiveCat('filters'); ?>" id="cat-filters" href="/vlc/features.php?cat=filters">A/V filters</a>-->
+ <a class="feature-cat <?php getActiveCat('intf'); ?>" id="cat-intf" href="/vlc/features.php?cat=intf">Interfaces</a>
+ <a class="feature-cat <?php getActiveCat('misc'); ?>" id="cat-misc" href="/vlc/features.php?cat=misc">Miscellaneous</a>
+ </td>
+ <td class="feature-list">
+ <div class="feature-div">
+ <?php
+ if($cat=="input") writeInputFeatures();
+ else if($cat=="video") writeVideoFeatures();
+ else if($cat=="audio") writeAudioFeatures();
+ else if($cat=="sub") writeSubFeatures();
+ else if($cat=="av") writeAVFeatures();
+ else if($cat=="filters") writeFilterFeatures();
+ else if($cat=="intf") writeIntfFeatures();
+ else if($cat=="misc") writeMiscFeatures();
+ ?>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td></td>
+ <td>
+ <ul class="feature-icon list-inline">
+ <li><img src="http://images.videolan.org/images/features/tick.png" alt="Yes" /> = Yes</li>
+ <li><img src="http://images.videolan.org/images/features/partial.png" alt="Partial" /> = Partial</li>
+ <li><img src="http://images.videolan.org/images/features/cross.png" alt="No" /> = No</li>
+ <li><img src="http://images.videolan.org/images/features/untested.png" alt="Untested" /> = Untested</li>
+ </ul>
+ </td>
+ </tr>
+ </table>
+ <h2>Streaming</h2>
+ <p>See the <a href="/streaming-features.html">Streaming features page</a></p>
+</div>
<?php footer('$Id: features.php 4814 2008-12-12 13:30 CEST altglass $'); ?>
<?php
} else {
=====================================
www.videolan.org/vlc/index.php
=====================================
--- a/www.videolan.org/vlc/index.php
+++ b/www.videolan.org/vlc/index.php
@@ -12,132 +12,175 @@
require($_SERVER["DOCUMENT_ROOT"]."/include/os-specific.php");
function vlcscreenshot($img, $thumb, $desc) {
- echo"<div class='screenshot' style='overflow: hidden; width: 120px;'><a href='http://images.videolan.org/vlc/screenshots/$img' rel='lightbox-vlc'><img
+ echo"<div class='screenshot-4-3-responsive screenshot-small'><a href='http://images.videolan.org/vlc/screenshots/$img' rel='lightbox-vlc'><img
src='//images.videolan.org/vlc/screenshots/$thumb' alt='VLC media player - $desc' /></a>
</div>";
}
-
+
function addos($name, $class, $url, $bold=false) {
echo "<div class='$class'>"._("Get VLC for")." <a href='$url'><strong>$name</strong></a></div>";
}
?>
<div class="container">
<?php drawVLCdownloadSection(); ?>
- <div class="row">
- <div class="col-sm-6 padding-bottom-24">
- <h1 style='margin-bottom: 25px;' class='red'><?php echo _("Features"); ?></h1>
- <?php echo _("Simple, fast and powerful media player."); ?>
- <br /><br />
- <?php echo _("Plays everything: Files, Discs, Webcams, Devices and Streams."); ?>
- <br /><br />
- <?php echo _("Plays most codecs with no codec packs needed:")."<br />
- MPEG-2, MPEG-4, H.264, MKV, WebM, WMV, MP3..."; ?>
- <br /><br />
- <?php echo _("Runs on all platforms:")." Windows, Linux, Mac OS X, Unix..."; ?>
- <br /><br />
- <?php echo _("Completely Free, no spyware, no ads and no user tracking."); ?>
- <br /><br />
- <?php echo _("Can do media conversion and streaming."); ?>
- <br />
- <a class="extra-info-link2 padding-top" href='/vlc/features.html'><?php echo _("Discover all features"); ?></a>
- </div>
-
- <div class="col-sm-6 padding-bottom-24">
- <h1 style='margin-bottom: 25px;' class='red'><?php echo _("Screenshots"); ?></h1>
- <?php
- vlcscreenshot( "1.0.0/VLC_Gnome.png",
- "1.0.0/tm_VLC_Gnome.jpg",
- "Linux - Gnome");
- vlcscreenshot( "1.0.0/vlc_101_w7_2.jpg",
- "1.0.0/tm_vlc_101_w7_2.jpg",
- "Windows 7 - Qt Interface" );
- vlcscreenshot( "1.0.0/vlc_101_w7_1.jpg",
- "1.0.0/tm_vlc_101_w7_1.jpg",
- "Windows 7 - Qt Interface" );
- vlcscreenshot( "1.0.0/vlc_101_w7.jpg",
- "1.0.0/tm_vlc_101_w7.jpg",
- "Windows 7 - Qt Interface" );
- vlcscreenshot( "1.0.0/VLC_Goldneye.jpg",
- "1.0.0/tm_VLC_Goldneye.jpg",
- "Windows Vista - Skins Interface" );
- vlcscreenshot( "1.0.0/VLC_Qt4.jpg",
- "1.0.0/tm_VLC_Qt4.jpg",
- "Windows Vista - Qt Interface" );
- vlcscreenshot( "appletv/Apple-TV-device-playback-large.jpg",
- "appletv/tm_Apple-TV-device-playback.jpg",
- "VLC on Apple TV" );
- vlcscreenshot( "2.2.0/vlc-2.2-macosx-playback-dark.jpg",
- "2.2.0/tm_vlc-2.2-macosx-playback-dark.jpg",
- "VLC on OS X" );
- vlcscreenshot( "2.2.0/vlc-2.2-macosx-audio-playback-dark.jpg",
- "2.2.0/tm_vlc-2.2-macosx-audio-playback-dark.jpg",
- "VLC on OS X" );
- vlcscreenshot( "2.2.0/vlc-2.2-macosx-playback.jpg",
- "2.2.0/tm_vlc-2.2-macosx-playback.jpg",
- "VLC on OS X" );
- vlcscreenshot( "2.2.0/vlc-ios-2.4-ipad-library-large.jpg",
- "2.2.0/tm_vlc-ios-2.4-ipad-library.jpg",
- "VLC on iPad" );
- vlcscreenshot( "winrt/artistpage-medium.jpg",
- "winrt/tm_artistpage.jpg",
- "VLC for Windows Store (Windows 10)" );
- ?>
- <div class="ltrClearLeft">
+</div>
+<section class="features bg-gray">
+ <div class="container">
+ <h2 class="visible-xs visible-sm center-font-xs center-font-sm"><?php echo _("Simple, fast and powerful"); ?></h2>
+ <div class="row reorder-sm reorder-xs">
+ <div class="items col-md-7 col-md-offset-1 col-md-pull-1 v-align-md v-align-lg">
+ <h2 class="hidden-xs hidden-sm"><?php echo _("Simple, fast and powerful"); ?></h2>
+ <ul>
+ <li>
+ <?php echo "<b>"._("Plays everything")."</b> - "._("Files, Discs, Webcams, Devices and Streams."); ?>
+ </li>
+ <li>
+ <?php echo "<b>"._("Plays most codecs with no codec packs needed")."</b> - MPEG-2, MPEG-4, H.264, MKV, WebM, WMV, MP3..."; ?>
+ </li>
+ <li>
+ <?php echo "<b>"._("Runs on all platforms")."</b> - Windows, Linux, Mac OS X, Unix, iOS, Android ..."; ?>
+ </li>
+ <li>
+ <?php echo "<b>"._("Completely Free")."</b> - "._("no spyware, no ads and no user tracking."); ?>
+ </li>
+ </ul>
+ <a class="feat-margin-left extra-info-link2 padding-top" href='/vlc/features.html'><?php echo _("learn more"); ?></a>
+ </div>
+ <div class="col-md-4 v-align-md v-align-lg">
+ <img src="//images.videolan.org/vlc/screenshots/android/playback-medium.jpg" class="center-sm center-xs img-responsive">
</div>
- <a class="extra-info-link2 padding-top" style='padding-left: 5px;' href='/vlc/screenshots.html'><?php echo _("View all screenshots"); ?></a>
</div>
</div>
-
- <div class="row">
- <div class="col-md-12">
- <h1><a name="download"><?php echo _("Official Downloads of VLC media player"); ?> </a></h1>
+</section>
+<section class="features">
+ <div class="container">
+ <h2 class="visible-xs visible-sm center-font-xs center-font-sm"><?php echo _("Customize"); ?></h2>
+ <div class="row">
+ <div class="col-md-4 v-align-md v-align-lg col-md-offset-1 col-md-pull-1">
+ <img src="//images.videolan.org/images/screenshots/skins.png" class="center-xs center-sm img-responsive">
+ </div>
+ <div class="items v-align-md v-align-lg col-md-7">
+ <h2 class="hidden-xs hidden-sm"><?php echo _("Customize"); ?></h2>
+ <ul>
+ <li>
+ <a href="/vlc/skins.html"><?php echo _("Add")." <b>"._("skins")."</b>."; ?></a>
+ </li>
+ <li>
+ <a href="/vlc/skineditor.html"><?php echo _("Create skins with")." <b>"._("VLC skin editor")."</b>."; ?></a>
+ </li>
+ <li>
+ <a href="http://addons.videolan.org/index.php?xcontentmode=903"><?php echo _("Install")." <b>"._("extensions")."</b>."; ?></a>
+ </li>
+ </ul>
+ </div>
</div>
- <div class="col-sm-4">
- <h2>Windows</h2>
- <?php addos( "Windows", "windows", "download-windows.html", true ); ?>
- <?php addos( "Windows Store", "winrt", "download-winrt.html" ); ?>
- <?php addos( "Windows Phone", "windowsphone", "download-windowsphone.html" ); ?>
- <h2>Apple Platforms</h2>
- <?php addos( "Mac OS X", "macosx", "download-macosx.html", true );
- addos( "iOS", "ios", "download-ios.html" );
- addos( "Apple TV", "appletv", "download-appletv.html" ); ?>
- <h2><?php echo _("Sources"); ?></h2>
- <p><?php echo _("You can also directly get the").' <strong><a href="download-sources.html">'
- ._("source code").'</a></strong>.</p>'; ?>
+ </div>
+</section>
+<section class="bg-gray">
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12 padding-bottom-24">
+ <h1 style='margin-bottom: 25px;' class='red'><?php echo _("Screenshots"); ?></h1>
+ <div id="content-carousel">
+ <?php
+ vlcscreenshot( "1.0.0/VLC_Gnome.png",
+ "1.0.0/tm_VLC_Gnome.jpg",
+ "Linux - Gnome");
+ vlcscreenshot( "1.0.0/vlc_101_w7_2.jpg",
+ "1.0.0/tm_vlc_101_w7_2.jpg",
+ "Windows 7 - Qt Interface" );
+ vlcscreenshot( "1.0.0/vlc_101_w7_1.jpg",
+ "1.0.0/tm_vlc_101_w7_1.jpg",
+ "Windows 7 - Qt Interface" );
+ vlcscreenshot( "1.0.0/vlc_101_w7.jpg",
+ "1.0.0/tm_vlc_101_w7.jpg",
+ "Windows 7 - Qt Interface" );
+ vlcscreenshot( "1.0.0/VLC_Goldneye.jpg",
+ "1.0.0/tm_VLC_Goldneye.jpg",
+ "Windows Vista - Skins Interface" );
+ vlcscreenshot( "1.0.0/VLC_Qt4.jpg",
+ "1.0.0/tm_VLC_Qt4.jpg",
+ "Windows Vista - Qt Interface" );
+ vlcscreenshot( "appletv/Apple-TV-device-playback-large.jpg",
+ "appletv/tm_Apple-TV-device-playback.jpg",
+ "VLC on Apple TV" );
+ vlcscreenshot( "2.2.0/vlc-2.2-macosx-playback-dark.jpg",
+ "2.2.0/tm_vlc-2.2-macosx-playback-dark.jpg",
+ "VLC on OS X" );
+ vlcscreenshot( "2.2.0/vlc-2.2-macosx-audio-playback-dark.jpg",
+ "2.2.0/tm_vlc-2.2-macosx-audio-playback-dark.jpg",
+ "VLC on OS X" );
+ vlcscreenshot( "2.2.0/vlc-2.2-macosx-playback.jpg",
+ "2.2.0/tm_vlc-2.2-macosx-playback.jpg",
+ "VLC on OS X" );
+ vlcscreenshot( "2.2.0/vlc-ios-2.4-ipad-library-large.jpg",
+ "2.2.0/tm_vlc-ios-2.4-ipad-library.jpg",
+ "VLC on iPad" );
+ vlcscreenshot( "winrt/artistpage-medium.jpg",
+ "winrt/tm_artistpage.jpg",
+ "VLC for Windows Store (Windows 10)" );
+ ?>
+ </div>
+ <div class="ltrClearLeft">
+ </div>
+ <a class="extra-info-link2 padding-top" style='padding-left: 5px;' href='/vlc/screenshots.html'><?php echo _("View all screenshots"); ?></a>
+ </div>
</div>
+ </div>
+</section>
+<section>
+ <div class="container">
+ <div class="row">
+ <div class="col-md-12">
+ <h1><a name="download"><?php echo _("Official Downloads of VLC media player"); ?> </a></h1>
+ </div>
+ <div class="col-sm-4">
+ <h2>Windows</h2>
+ <?php addos( "Windows", "windows", "download-windows.html", true ); ?>
+ <?php addos( "Windows Store", "winrt", "download-winrt.html" ); ?>
+ <?php addos( "Windows Phone", "windowsphone", "download-windowsphone.html" ); ?>
+ <h2>Apple Platforms</h2>
+ <?php addos( "Mac OS X", "macosx", "download-macosx.html", true );
+ addos( "iOS", "ios", "download-ios.html" );
+ addos( "Apple TV", "appletv", "download-appletv.html" ); ?>
+ <h2><?php echo _("Sources"); ?></h2>
+ <p><?php echo _("You can also directly get the").' <strong><a href="download-sources.html">'
+ ._("source code").'</a></strong>.</p>'; ?>
+ </div>
- <div class="col-sm-4">
- <h2>GNU/Linux</h2>
- <?php
- addos( "Debian GNU/Linux", "debian", "download-debian.html" );
- addos( "Ubuntu", "ubuntu", "download-ubuntu.html" );
- addos( "Mint", "mint", "http://community.linuxmint.com/software/view/vlc" );
- addos( "openSUSE", "suse", "download-suse.html" );
- addos( "Gentoo Linux", "gentoo", "download-gentoo.html" );
- addos( "Fedora", "fedora", "download-fedora.html" );
- addos( "Arch Linux", "archlinux", "download-archlinux.html" );
- addos( "Slackware Linux", "slackware", "download-slackware.html" );
- addos( "ALT Linux", "altlinux", "download-altlinux.html" );
- addos( "Red Hat Enterprise Linux", "redhat", "download-redhat.html" );
- ?>
- </div>
+ <div class="col-sm-4">
+ <h2>GNU/Linux</h2>
+ <?php
+ addos( "Debian GNU/Linux", "debian", "download-debian.html" );
+ addos( "Ubuntu", "ubuntu", "download-ubuntu.html" );
+ addos( "Mint", "mint", "http://community.linuxmint.com/software/view/vlc" );
+ addos( "openSUSE", "suse", "download-suse.html" );
+ addos( "Gentoo Linux", "gentoo", "download-gentoo.html" );
+ addos( "Fedora", "fedora", "download-fedora.html" );
+ addos( "Arch Linux", "archlinux", "download-archlinux.html" );
+ addos( "Slackware Linux", "slackware", "download-slackware.html" );
+ addos( "ALT Linux", "altlinux", "download-altlinux.html" );
+ addos( "Red Hat Enterprise Linux", "redhat", "download-redhat.html" );
+ ?>
+ </div>
- <div class="col-sm-4">
- <h2><?php echo _("Other Systems"); ?></h2>
- <?php
- addos( "Android", "android", "download-android.html" );
- addos( "Chrome OS", "chromeos", "download-chromeos.html" );
- addos( "FreeBSD", "freebsd", "download-freebsd.html" );
- addos( "NetBSD", "netbsd", "download-sources.html" );
- addos( "OpenBSD", "openbsd", "download-sources.html" );
- addos( "Solaris", "solaris", "download-sources.html" );
- addos( "QNX", "qnx", "download-sources.html" );
- addos( "Syllable", "syllable", "download-syllable.html" );
- addos( "OS/2", "os2", "http://hobbes.nmsu.edu/h-search.php?sh=1&button=Search&key=vlc&stype=all&sort=date&dir=%2Fpub%2Fos2%2Fapps%2Fmmedia%2Fvideo%2Fplayers" );
- ?>
+ <div class="col-sm-4">
+ <h2><?php echo _("Other Systems"); ?></h2>
+ <?php
+ addos( "Android", "android", "download-android.html" );
+ addos( "Chrome OS", "chromeos", "download-chromeos.html" );
+ addos( "FreeBSD", "freebsd", "download-freebsd.html" );
+ addos( "NetBSD", "netbsd", "download-sources.html" );
+ addos( "OpenBSD", "openbsd", "download-sources.html" );
+ addos( "Solaris", "solaris", "download-sources.html" );
+ addos( "QNX", "qnx", "download-sources.html" );
+ addos( "Syllable", "syllable", "download-syllable.html" );
+ addos( "OS/2", "os2", "http://hobbes.nmsu.edu/h-search.php?sh=1&button=Search&key=vlc&stype=all&sort=date&dir=%2Fpub%2Fos2%2Fapps%2Fmmedia%2Fvideo%2Fplayers" );
+ ?>
+ </div>
</div>
</div>
-
+</section>
<!-- <div style="margin-top: 30px;">
<a href="/vlc/stats/downloads.php">VLC download statistics</a>
</div>
View it on GitLab: https://code.videolan.org/VideoLAN.org/websites/compare/9a9510f17c4f89c741e96aec7f669f7acfcce4a3...a675f8ed5d61f9260a3a5e79ef5c74d6a41bfa55
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mailman.videolan.org/pipermail/www-doc/attachments/20160120/897c95a6/attachment.html>
More information about the www-doc
mailing list