From 0a985d2edcbb177664ae996d4121167fa66ac9f2 Mon Sep 17 00:00:00 2001
From: deadlocker8 <deadlocker@gmx.de>
Date: Sat, 20 Aug 2016 19:05:22 +0200
Subject: [PATCH] implemented php
---
.gitignore | 3 +
index.php | 175 ++++++++++++++++++++++-------------------------------
style.css | 81 +++++++++++++++++++++++++
3 files changed, 157 insertions(+), 102 deletions(-)
create mode 100644 .gitignore
create mode 100644 style.css
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7768ae1
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+# Created by .ignore support plugin (hsz.mobi)
+.idea/
+/progress.iml
diff --git a/index.php b/index.php
index eaa5095..f07fb95 100644
--- a/index.php
+++ b/index.php
@@ -1,115 +1,86 @@
<!doctype html>
<?php
-$percentage = 75;
-
-?>
-
-
-<html>
-<head>
-<meta charset="utf-8">
-<title>Animated Circular Progress Bar Demos</title>
-<style>
-/* Load animation */
-
-@-webkit-keyframes
-load { 0% {
-stroke-dashoffset:0
-}
-}
-@-moz-keyframes
-load { 0% {
-stroke-dashoffset:0
-}
-}
-@keyframes
-load { 0% {
-stroke-dashoffset:0
-}
-}
+$backgroundColor = "#FFFFFF";
+$fontColor = "#444444";
-/* Container */
+$percentage = 75;
+// in vmin (useful between 0 and 100)
+$elementSize = 35;
+$progressColor = "#81c784";
+$strokeWidth = "8";
-.progress {
- position: relative;
- display: inline-block;
- padding: 0;
- text-align: center;
-}
+$items = array(
+ array("title" => "VideoShowCase", "percentage" => "75", "size" => "35", "progressColor" => "#81c784", "strokeWidth" => "8"),
+ array("title" => "Progress", "percentage" => "33", "size" => "25", "progressColor" => "#ff0000", "strokeWidth" => "20")
-/* Item */
+);
-.progress>li {
- display: inline-block;
- position: relative;
- text-align: center;
- color: #93A2AC;
- font-family: Lato;
- font-weight: 100;
- margin: 2rem;
-}
+function hex2rgb($hex)
+{
+ $hex = str_replace("#", "", $hex);
-.progress>li:before {
- content: attr(data-name);
- position: absolute;
- width: 100%;
- bottom: -2rem;
- font-weight: 400;
+ if(strlen($hex) == 3)
+ {
+ $r = hexdec(substr($hex, 0, 1) . substr($hex, 0, 1));
+ $g = hexdec(substr($hex, 1, 1) . substr($hex, 1, 1));
+ $b = hexdec(substr($hex, 2, 1) . substr($hex, 2, 1));
+ }
+ else
+ {
+ $r = hexdec(substr($hex, 0, 2));
+ $g = hexdec(substr($hex, 2, 2));
+ $b = hexdec(substr($hex, 4, 2));
+ }
+ $rgb = array($r, $g, $b);
+ return $rgb;
}
-.progress>li:after {
- content: attr(data-percent);
- position: absolute;
- width: 100%;
- top: 3.7rem;
- left: 0;
- font-size: 2rem;
- text-align: center;
-}
+$rgb = hex2rgb($backgroundColor);
+$progressBackgroundColor = 'rgba('.$rgb[0].', '.$rgb[1].', '.$rgb[2].', 0.9)';
-.progress svg {
- width: 10rem;
- height: 10rem;
-}
-
-.progress svg:nth-child(2) {
- position: absolute;
- left: 0;
- top: 0;
- transform: rotate(-90deg);
- -webkit-transform: rotate(-90deg);
- -moz-transform: rotate(-90deg);
- -ms-transform: rotate(-90deg);
-}
-
-.progress svg:nth-child(2) path {
- fill: none;
- stroke-width: 25;
- stroke-dasharray: 629;
- stroke: rgba(255, 255, 255, 0.9);
- -webkit-animation: load 1s;
- -moz-animation: load 1s;
- -o-animation: load 1s;
- animation: load 1s;
-}
-</style>
-<link href="http://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css">
+?>
+<html>
+<head>
+ <meta charset="utf-8">
+ <title>Progress</title>
+ <link type="text/css" rel="stylesheet" href="style.css"/>
</head>
+<body style="background-color: <?php echo $backgroundColor; ?>; color: <?php echo $fontColor; ?>;">
+<table>
+ <tr>
+ <td class="headline">Current Projects</td>
+ </tr>
+ <tr>
+ <td>
+ <ul class="progress">
+ <?php
+ for($i = 0; $i < sizeof($items); $i++)
+ {
+ $item = $items[$i];
-<body>
-<ul class="progress">
- <!-- Item -->
- <li data-name="RMP-4.0" data-percent="<?php echo $percentage;?>%">
- <svg viewBox="-10 -10 220 220">
- <g fill="none" stroke-width="8" transform="translate(100,100)">
- <path d="M 0,-100 A 100,100 0 0,1 0,100" stroke="#81c784"/>
- <path d="M 0,100 A 100,100 0 0,1 -0,-100" stroke="#81c784"/>
- </g>
- </svg>
- <svg viewBox="-10 -10 220 220">
- <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="<?php echo ($percentage/100)* 629;?>"></path>
- </svg>
- </li>
-
+ echo '<li data-percent="' . $item["percentage"] . '%" id="item-'.$i.'">' .
+ '<svg viewBox="-10 -10 220 220" style="width: ' . $item["size"] . 'vmin; height: ' . $item["size"] . 'vmin;">' .
+ '<g fill="none" stroke-width="' . $item["strokeWidth"] . '" transform="translate(100,100)">' .
+ '<path d="M 0,-100 A 100,100 0 0,1 0,100" stroke="' . $item["progressColor"] . '"/>' .
+ '<path d="M 0,100 A 100,100 0 0,1 -0,-100" stroke="' . $item["progressColor"] . '"/>' .
+ '</g>' .
+ '</svg>' .
+ '<svg viewBox="-10 -10 220 220" style="width: ' . $item["size"] . 'vmin; height: ' . $item["size"] . 'vmin; stroke: ' . $progressBackgroundColor . ';">' .
+ '<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" '.
+ 'stroke-dashoffset="' . ($item["percentage"] / 100) * 629 . '"></path>' .
+ '</svg>' .
+ '<style>' .
+ '#item-'.$i.':after {' .
+ 'font-size: ' . ($item["size"] / 6) . 'vmin; top: ' . (($item["size"]) - ($item["size"] / 5)) / 2 . 'vmin;' .
+ '}' .
+ '</style>' .
+ '<div class="progress-title" style="font-size: ' . ($item["size"] / 10) . 'vmin;">'.$item["title"].'</div>' .
+ '</li>';
+ }
+ ?>
+ </ul>
+ </td>
+ </tr>
+</table>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9ed1a61
--- /dev/null
+++ b/style.css
@@ -0,0 +1,81 @@
+/* Load animation */
+@-webkit-keyframes load {
+ 0% {
+ stroke-dashoffset: 0
+ }
+}
+
+@-moz-keyframes load {
+ 0% {
+ stroke-dashoffset: 0
+ }
+}
+
+@keyframes load {
+ 0% {
+ stroke-dashoffset: 0
+ }
+}
+
+.progress {
+ position: relative;
+ padding: 0;
+ text-align: center;
+}
+
+.progress > li {
+ display: inline-block;
+ position: relative;
+ text-align: center;
+ font-weight: 100;
+ margin: 2rem;
+}
+
+.progress > li:after {
+ content: attr(data-percent);
+ position: absolute;
+ width: 100%;
+ left: 0;
+ text-align: center;
+}
+
+.progress svg:nth-child(2) {
+ position: absolute;
+ left: 0;
+ top: 0;
+ transform: rotate(-90deg);
+ -webkit-transform: rotate(-90deg);
+ -moz-transform: rotate(-90deg);
+ -ms-transform: rotate(-90deg);
+}
+
+.progress svg:nth-child(2) path {
+ fill: none;
+ stroke-width: 25;
+ stroke-dasharray: 629;
+ -webkit-animation: load 1s;
+ -moz-animation: load 1s;
+ -o-animation: load 1s;
+ animation: load 1s;
+}
+
+body {
+ padding: 0;
+ margin: 0;
+ font-family: Sans-Serif;
+}
+
+table {
+ width: 100vw;
+ height: 100vh;
+ text-align: center;
+}
+
+.progress-title{
+ margin-top: 3vmin;
+}
+
+.headline {
+ font-size: 6vmin;
+ padding-top: 3vmin;
+}
\ No newline at end of file
--
GitLab