aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorManuel Hiebel <leuhmanu@mageia.org>2021-01-18 17:50:45 +0100
committerManuel Hiebel <leuhmanu@mageia.org>2021-01-18 17:50:45 +0100
commita96caea9291029dcfeffce8eebcf43c07dfe90e0 (patch)
tree5fd387b151a378ff46e15a80123dcb9663eadb44
parent9b96cd149c875b3ce6bcc16e003023fc77c395e0 (diff)
downloadwww-a96caea9291029dcfeffce8eebcf43c07dfe90e0.tar
www-a96caea9291029dcfeffce8eebcf43c07dfe90e0.tar.gz
www-a96caea9291029dcfeffce8eebcf43c07dfe90e0.tar.bz2
www-a96caea9291029dcfeffce8eebcf43c07dfe90e0.tar.xz
www-a96caea9291029dcfeffce8eebcf43c07dfe90e0.zip
test page with svg/css3 animation
Diffstat
-rw-r--r--test/mga8.php436
1 files changed, 436 insertions, 0 deletions
diff --git a/test/mga8.php b/test/mga8.php
new file mode 100644
index 000000000..728147d01
--- /dev/null
+++ b/test/mga8.php
@@ -0,0 +1,436 @@
+<?php
+/**
+*/
+define('HLANG', true);
+define('ALIGNMENT', 'Center');
+require '../langs.php';
+$dictionary = read_translation_file($locale, array('index', 'news', 'common_footer'));
+$rtl = is_locale_rtl($locale);
+
+?><!DOCTYPE html>
+<html <?php echo $rtl ? 'dir="rtl"' : 'dir="ltr"'?> lang="<?php echo $locale; ?>">
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title><?php _g('Home of the Mageia project'); ?></title>
+ <meta name="description" content="<?php _g('Mageia is a community-based Linux distribution, for desktop & server.'); ?>">
+ <meta name="keywords" content="<?php _g('linux, mageia, free software, operating system, computer, laptop, desktop, server, headless, device, mobile, mandriva, mandrake'); ?>">
+ <link type="text/plain" rel="author" href="/humans.txt">
+ <?php
+ foreach ($langs as $l => $name)
+ if ($l != $locale)
+ echo sprintf('<link rel="alternate" hreflang="%s" href="//www.mageia.org/%s/">', $l, $l);
+ ?>
+ <link rel="alternate" type="application/rss+xml" title="<?php _g('Mageia Blog (English)'); ?>" href="<?php _g('https://blog.mageia.org/en/?feed=rss'); ?>">
+ <?php require '../analytics.php'; ?>
+ <?php echo common_header(); ?>
+ <style>
+
+ hr { display: none; }
+ ol, ul { margin: 0; padding: 0; list-style: none; }
+ h1, h2 { font-size: 3rem; margin-top: 0; color: #fff !important; }
+ #b1 { color: #fff !important; }
+
+ a[hreflang]:after { color:#d0d0ff; font-style:italic; content: "\A0["attr(hreflang)"]"; }
+
+ body {background: #1c5f89;}
+ #down {background: #ffffff;}
+
+ #master {
+ padding: 2em;
+ border: 1px solid red;
+ margin: 2em;
+ display: none;
+ }
+
+ #up, #down { margin: 0; padding: 0; }
+
+ #up {
+ padding-bottom: 0px;
+ color: #fff;
+ text-shadow: 0 0 1px #333;
+ background: #1c5f89;
+ /*
+ background: -webkit-radial-gradient(20% 350px, circle cover, #3494D3 0%, #2383C2 50%);
+ background: -moz-radial-gradient(26% 370px, circle cover, #3494D3 0%, #2383C2 50%);
+ background: -o-radial-gradient(20% 350px, circle cover, #3494D3 0%, #2383C2 50%);
+ background: radial-gradient(20% 350px, circle cover, #3494D3 0%, #2383C2 50%);
+ */
+ }
+
+ #up .container {
+ padding-bottom: 40px;
+ }
+
+ ul#dl li { margin-bottom: 14px; }
+ #dl-btn {
+ display: block;
+ color: #000;
+ text-decoration: none;
+ width: 280px;
+ background: #E8EBEE;
+ padding: 20px 20px 15px 20px;
+ border-radius: 4px;
+ text-shadow: none;
+ box-shadow: 0 0 1px #333;
+ /*
+ background: #ff6020;
+ background: -webkit-linear-gradient(top, #ff6600 0%, orange 100%);
+ background: -moz-linear-gradient(top, #ff3000 0%, orange 100%);
+ background: -o-linear-gradient(top, #ff3000 0%, orange 100%);
+ background: linear-gradient(top, #ff3000 0%, orange 100%);
+ /**/
+ }
+ #dl-btn-mageia {
+ /* background: url(/g/media/logo/mageia-2013-anim.svg) no-repeat; */
+ width: 204px;
+ height: 82px;
+ display: block;
+ color: transparent;
+ margin-bottom: 10px;
+ }
+ span.dl-btn {
+ display: block;
+ }
+ span.dl-btn span.low {
+ color: #777;
+ }
+ p.dl-info {
+ padding: 0 20px;
+ font-size: 85%;
+ }
+ p.dl-info a {
+ color: #fff;
+ text-shadow: none;
+ text-decoration: none;
+ }
+ .dl-btn-other {
+ display: block;
+ width: 280px;
+ padding: 10px 20px 10px 20px;
+ background: rgba(255,255,255, 0.15);
+ border-radius: 4px;
+ color: #ddeeff;
+ text-shadow: none;
+ text-decoration: none;
+ font-size: 85%;
+ }
+ .dl-btn-other:hover {
+ background: rgba(255,255,255, 0.3);
+ color: #fff;
+ }
+ #dl-btn:hover { box-shadow: 0 0 10px rgba(255,255,255,1); }
+ #dl-btn:active { border-radius: 0; }
+
+ #fnotes {
+ text-align: center;
+ font: 85%/1.2 Verdana,Arial,sans-serif;
+ color: #f0f0f0;
+ }
+ #fnotes a { color: #aaa; text-decoration: none; }
+ .free-dl { color: green; font-weight: bold; }
+
+ #newslist {
+ display: block;
+ padding: 5px 10px;
+ margin: 0px 70px;
+ background: rgba(255,255,255, 0.1);
+ border-radius: 4px;
+ color: #ddeeff;
+ text-shadow: none;
+ font-size: 120%;
+ }
+ #newslist a {
+ color: #ddeeff;
+ text-decoration: none;
+ }
+ #newslist a:hover { color: #ffffff; }
+
+
+ /* Landscape phones and down */
+ @media (max-width: 480px) {}
+
+ /* Landscape phone to portrait tablet */
+ @media (max-width: 768px) {
+ #newslist { margin: 0px; }
+ }
+
+ /* Portrait tablet to landscape and desktop */
+ @media (max-width: 1000px) {
+ h2 { margin: 0 0 .3em; line-height: 1.2; font-size: 200%; }
+
+ ul#p { font-size: 90%; list-style: circle; padding: 0 0 0 2em; margin: 0; }
+ #up { padding-bottom: 0; }
+ #up > .container { padding: 1em; }
+ #b1 { margin: 0; padding: 0 0 1em 0; }
+ #navb li { margin: 1em 0 0 1em; float: left; }
+ #navb li a {
+ display: block;
+ width: 222px;
+ padding: 10px 20px 10px 20px;
+ background: rgba(50,160,200, 0.1);
+ border-radius: 4px;
+ color: #68a;
+ text-shadow: none;
+ text-decoration: none;
+ font-size: 75%;
+ }
+ .dl-btn-other:hover {
+ background: rgba(255,255,255, 0.2);
+ color: #fff;
+ }
+ #fnotes { clear: both; padding: 2em; text-align: left; }
+ }
+
+ @media (min-width: 1000px) {
+ h2 { margin-bottom: 0.3em; }
+ ul#p li:before { content: " > "; }
+ #up {
+ background: url(/g/8/background.png) no-repeat center;
+ background-size: cover
+ }
+ #b1 { padding: 33px 70px 70px 70px; }
+ #b2 { padding-left: 70px; padding-right: 70px; }
+
+ #navb {
+ padding: 0;
+ margin: 0 auto;
+ display: table;
+ border-radius: 4px;
+ margin-bottom: 20px;
+ }
+ #navb li {
+ display: table-cell;
+ padding: 0;
+ border-right: 1px solid #f0f0f0;
+ }
+ #navb li:last-child { border: none; }
+ #navb a {
+ text-decoration: none;
+ padding: 20px 1em 20px 1em;
+ display: block;
+ min-width: 80px;
+ text-align: center;
+ color: #444;
+ }
+ #navb a:hover {
+ color: #2383C2;
+ }
+ }
+ @media (min-width: 1200px) {}
+
+@keyframes float {
+ 0% {
+ transform: translateY(0em);
+ }
+ 100% {
+ transform: translateY(2em);
+ }
+}
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+
+@keyframes slide-out-blurred-top {
+ 0% {
+ transform: translateY(0) scaleY(1) scaleX(1);
+ transform-origin: 50% 0%;
+ filter: blur(0);
+ opacity: 1;
+ }
+ 100% {
+ transform: translateY(-1000px) scaleY(2) scaleX(1);
+ transform-origin: 50% 0%;
+ filter: blur(5px);
+ opacity: 0;
+ }
+}
+
+svg {
+ width: 240px;
+ height: 100px;
+}
+svg .bubble {
+ opacity: 0;
+ animation: fade-in 2s infinite, float 2s ease infinite reverse ;
+ /*animation: slide-out-blurred-top 0.45s cubic-bezier(1,0.03,1,.0) infinite;*/
+}
+
+svg .bubble:nth-child(1) {
+ animation-delay: 0.2s;
+}
+svg .bubble:nth-child(2) {
+ animation-delay: 0.4s;
+}
+svg .bubble:nth-child(3) {
+ animation-delay: 0.6s;
+}
+svg .bubble:nth-child(4) {
+ animation-delay: 0.8s;
+}
+svg .bubble:nth-child(5) {
+ animation-delay: 1s;
+}
+
+
+svg .text, .cauldron {
+ opacity: 0;
+ animation: fade-in 1s forwards ;
+}
+
+svg .text:nth-child(1) {
+ animation-delay: 0.2s;
+}
+svg .text:nth-child(2) {
+ animation-delay: 0.4s;
+}
+svg .text:nth-child(3) {
+ animation-delay: 0.6s;
+}
+svg .text:nth-child(4) {
+ animation-delay: 0.8s;
+}
+svg .text:nth-child(5) {
+ animation-delay: 1s;
+}
+svg .text:nth-child(6) {
+ animation-delay: 1.2s;
+}
+svg .text:nth-child(7) {
+ animation-delay: 1.4s;
+}
+svg .text:nth-child(8) {
+ animation-delay: 1.6s;
+}
+svg .text:nth-child(9) {
+ animation-delay: 1.8s;
+}
+ </style>
+</head>
+<body <?php echo $rtl ? 'align="right"' : ''?>>
+ <?php echo $hsnav?>
+<div id="master">
+ <h1><a href="about/"><?php _g('Mageia, a free, community-based Linux distribution for desktop & server.'); ?></a></h1>
+</div>
+
+<div <?php echo $rtl ? 'align="right"' : ''?> id="up">
+ <div class="container">
+ <div>
+ <?php
+ include '../lib/news.php';
+ $loc_planet_url = _r('https://planet.mageia.org/en/');
+ $loc_blog_url = _r('https://blog.mageia.org/en/');
+ $eng_planet_url = 'https://planet.mageia.org/en/';
+ $eng_blog_url = 'https://blog.mageia.org/en/';
+ $fresh_blog_post_titles = prepare_fresh_blog_post_titles($eng_planet_url, $eng_blog_url, $loc_planet_url, $loc_blog_url, 1, 1);
+ $fresh_loc_posts = $fresh_blog_post_titles[1];
+ $num_fresh_loc_posts = $fresh_blog_post_titles[2];
+ $fresh_eng_posts = $fresh_blog_post_titles[4];
+ $first_source = $fresh_blog_post_titles[5];
+ $num_fresh_eng_posts = count($fresh_eng_posts);
+ if (0 < $num_fresh_loc_posts || 0 < $num_fresh_eng_posts) {
+ $prefix = '<span style="font-weight: bold;">';
+ if ($first_source == 1) {
+ $prefix .= sprintf(_r('Latest news from our <a href="%s">localized planet</a>:'), $loc_planet_url);
+ } else if ($first_source == 2) {
+ $prefix .= sprintf(_r('Latest news from our <a href="%s">localized blog</a>:'), $loc_blog_url);
+ } else if ($first_source == 3) {
+ $prefix .= sprintf(_r('Latest news from our <a href="%s">English planet</a>:'), $eng_planet_url);
+ } else if ($first_source == 4) {
+ $prefix .= sprintf(_r('Latest news from our <a href="%s">English blog</a>:'), $eng_blog_url);
+ }
+ $prefix .= '</span> ';
+
+ if (0 < $num_fresh_loc_posts) {
+ show_feed($locale, null, '', '', 0, null, true, $prefix, $fresh_loc_posts);
+ } else if (0 < $num_fresh_eng_posts) {
+ show_feed($locale, null, '', '', 0, null, true, $prefix, $fresh_eng_posts);
+ }
+ }
+ ?>
+ </div>
+ <div class="row">
+ <div class="col">
+ <div id="b1">
+ <h2 <?php echo $rtl ? 'align="right"' : ''?>><?php _g('Change your perspective'); ?></h2>
+ <ul id="p"><?php
+ _g('Stable, secure operating system for desktop &amp; server', null, 'li');
+ _g('Free Software, coproduced by hundreds of people', null, 'li');
+ _g('Elected governance, nonprofit organization', null, 'li');
+ _g('You can be part of it', null, 'li');
+ ?></ul>
+ </div>
+ <div id="b2">
+ <ul id="dl">
+ <li><a href="/<?php echo $locale ?>/downloads/" id="dl-btn">
+
+ <span id="dl-btn-mageia">
+
+<svg version="1.1" viewBox="0 0 934 400" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
+<metadata>
+<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/>
+</cc:Work>
+</rdf:RDF>
+</metadata>
+<g transform="translate(-45 -440.37)">
+<g transform="translate(-.20804 7.0001)" fill="#2397d4">
+<path class="bubble" d="m177.89 597.13h-0.01c-6.6729 0-12.107-5.4267-12.114-12.095-0.01-6.6905 5.4251-12.125 12.104-12.132 6.683 0 12.116 5.4267 12.124 12.095 0 6.6905-5.4251 12.126-12.104 12.133z"/>
+<path class="bubble" d="m210.61 588.24c-6.2309 0-11.302-5.0662-11.307-11.292-0.01-6.242 5.0612-11.316 11.296-11.321 6.2392 0 11.311 5.0651 11.317 11.291 0 6.242-5.0622 11.316-11.296 11.323h-0.01z"/>
+<path class="bubble" d="m201.3 555.96c0 5.5755-4.5198 10.095-10.095 10.095s-10.095-4.5199-10.095-10.095c0-5.5756 4.5198-10.095 10.095-10.095s10.095 4.5198 10.095 10.095z" stroke-width="1.4422"/>
+<path class="bubble" d="m216.65 539c0 5.1294-4.1581 9.2875-9.2875 9.2875-5.1294 0-9.2875-4.1581-9.2875-9.2875 0-5.1294 4.1581-9.2875 9.2875-9.2875 5.1294 0 9.2875 4.1581 9.2875 9.2875z" stroke-width=".80761"/>
+<path class="bubble" d="m195.65 522.44c0 4.4603-3.6158 8.0761-8.0761 8.0761-4.4603 0-8.0761-3.6158-8.0761-8.0761s3.6158-8.0761 8.0761-8.0761c4.4603 0 8.0761 3.6158 8.0761 8.0761z" stroke-width=".76915"/>
+</g>
+<path class="cauldron" d="m143.93 615.04c-10.45 13.545-18.926 28.781-18.926 47.238 0 40.006 30.358 73 68 73 37.64 0 68-32.993 68-73 0-18.461-8.4889-33.212-19.53-47.238-4.1402-4.3446-10.118-3.6986-14.469-0.91856-12.733 6.5886-19.606 9.2209-34.001 9.1565-13.922-0.0624-21.237-2.336-33.97-9.2774-4.3514-2.6592-10.964-3.3052-15.104 1.0394zm9.0742 11.238c13.198 7.2975 24.969 11 40 11 15.044 0 26.795-3.7025 40-11 7.2055 10.16 14 22.758 14 36 0 32.801-24.175 59-54 59-29.826 0-55-26.199-55-59 0-13.225 7.7788-25.832 15-36z" color="#000000" fill="#262f45" style="block-progression:tb;text-indent:0;text-transform:none"/>
+<path class="text" d="m346 632.28c-24 0-42 18-42 42v40h12v-40c0-18 12-30 30-30s30 12 30 30v40h12v-40c0-18 12-30 30-30s30 12 30 30v40h12v-40c0-24-18-42-42-42-15.665 0-28.784 7.6868-36 19.687-7.2157-12.001-20.335-19.687-36-19.687z" fill="#262f45"/>
+<path class="text" d="m521 632.28c-24 0-42 18-42 42s18 42 42 42c12 0 22.5-4.5 30-12v10h12v-40c0-24-18-42-42-42zm0 12c18 0 30 12 30 30s-12 30-30 30-30-12-30-30 12-30 30-30z" fill="#262f45"/>
+<path class="text" d="m623 632.28c-24 0-42 18-42 42s18 42 42 42c12 0 22.5-4.5 30-12v12c0 18-12 30-30 30v12c24 0 42-18 42-42v-42c0-24-18-42-42-42zm0 12c18 0 30 12 30 30s-12 30-30 30-30-12-30-30 12-30 30-30z" fill="#262f45"/>
+<path class="text" d="m725 632.28c-24 0-42 18-42 42s18 42 42 42v-12c-15.908 0-27.106-9.3968-29.5-24h71.125c0.25558-1.9564 0.375-3.9482 0.375-6 0-24-18-42-42-42zm0 12c15.908 0 27.106 9.397 29.5 24h-59c2.3939-14.603 13.592-24 29.5-24z" fill="#262f45"/>
+<path class="text" d="m785 634.28h12v80h-12z" fill="#262f45"/>
+<path class="text" d="m791 745.28c-4.9706 0-9-4.0294-9-9 0-4.9705 4.0294-8.9999 9-8.9999 4.9705 0 9 4.0294 9 8.9999 0 4.9706-4.0295 9-9 9z" fill="#2397d4"/>
+<path class="text" d="m857 632.28c-24 0-42 18-42 42s18 42 42 42c12 0 22.5-4.5 30-12v10h12v-40c0-24-18-42-42-42zm0 12c18 0 30 12 30 30s-12 30-30 30-30-12-30-30 12-30 30-30z" fill="#262f45"/>
+</g>
+</svg>
+
+ </span>
+ <span style="font-size: 32px; color: green; float: right;"></span>
+ <span class="dl-btn free-dl"><?php _g('Mageia 8'); /* _g('Mageia 8.1'); */?></span>
+ <span class="dl-btn"><?php _g('released in february 2021'); ?></span>
+
+ </a>
+ <p class="dl-info">
+ <?php _g('<a href="%s" hreflang="en">Release notes</a>', array(_r('https://wiki.mageia.org/en/Mageia_8_Release_Notes'))); ?>,
+ <?php _g('<a href="%s" hreflang="en">errata</a>', array(_r('https://wiki.mageia.org/en/Mageia_8_Errata'))); ?>.
+
+ </p>
+ </li>
+ <li><a href="contribute/" class="dl-btn-other"><?php _g('<strong>Get involved</strong> in the next version'); ?></a>
+ </li>
+
+
+
+
+
+
+
+ <!--<li><a href="/downloads/prerelease/" class="dl-btn-other"><?php _g('Test'); ?> Mageia 9</a></li>-->
+
+
+
+ </ul>
+ </div>
+ </div><!--col-->
+ </div><!--row-->
+ </div>
+</div>
+<?php echo common_footer($locale); ?>
+</body>
+</html>
generated by cgit v1.2.1 (git 2.21.0) at 2024-11-23 10:19:02 +0000