Select Git revision
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
index.php 3.52 KiB
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Matchconceptions Memory Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="memory-game">
<div class="memory-card" data-framework="aurelia">
<?php
$text = 'Beispieltext';
$style = 'background-color: #FFCCCB'
$svg = "<svg xmlns='http://www.w3.org/2000/svg' width='100' height='50'><text x='10' y='30'>$text</text></svg>";
$svgData = base64_encode($svg);
$src = 'data:image/svg+xml;base64,$svgData';
$imgTag = "<img class='front-face' src='$src' alt='$text' style='$style'/>";
echo $imgTag;
?>
<!-- <img class="front-face" src="img/aurelia.svg" alt="Aurelia" style="background-color: #FFCCCB"/> -->
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="aurelia">
<img class="front-face" src="img/aurelia.svg" alt="Aurelia" style="background-color: #90EE90"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="vue">
<img class="front-face" src="img/vue.svg" alt="Vue" style="background-color: #FFCCCB"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="vue">
<img class="front-face" src="img/vue.svg" alt="Vue" style="background-color: #90EE90"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="angular">
<img class="front-face" src="img/angular.svg" alt="Angular" style="background-color: #FFCCCB"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="angular">
<img class="front-face" src="img/angular.svg" alt="Angular" style="background-color: #90EE90"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="ember">
<img class="front-face" src="img/ember.svg" alt="Ember" style="background-color: #FFCCCB"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="ember">
<img class="front-face" src="img/ember.svg" alt="Ember" style="background-color: #90EE90"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="backbone">
<img class="front-face" src="img/backbone.svg" alt="Backbone" style="background-color: #FFCCCB"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="backbone">
<img class="front-face" src="img/backbone.svg" alt="Backbone" style="background-color: #90EE90"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="react">
<img class="front-face" src="img/react.svg" alt="React" style="background-color: #FFCCCB"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
<div class="memory-card" data-framework="react">
<img class="front-face" src="img/react.svg" alt="React" style="background-color: #90EE90"/>
<img class="back-face" src="img/js-badge.svg" alt="JS Badge" />
</div>
</section>
<script src="scripts.js"></script>
<!--- From https://marina-ferreira.github.io/tutorials/js/memory-game/ --->
</body>
</html>