Skip to content
Snippets Groups Projects
Select Git revision
  • a0b7b23eccc4d47b4ab62e99a41f8b5c93a1d6c0
  • main default protected
2 results

index.php

Blame
  • 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>