<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MCP AI Card App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">[v-cloak] { display: none; }</style>
<link rel="stylesheet" type="text/css" href="app/style.min.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-157162832-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-157162832-1');
</script>
</head>
<body>
<div id="app">
<div class="splash" v-if="splash">
<img src="app/img/logo-mcp.png" alt="" class="logo" /><br />
<p>Loading LMD deck...</p>
<!-- <select v-model="selectedData" @change="getData()">
<option>Select LMD deck...</option>
<option value="basic">Basic (test)</option>
<option value="ultron-master">Ultron Master of Metal (test)</option>
</select> -->
</div>
<div class="help" v-if="showHelp" v-cloak>
<a href="#" @click.prevent="closeHelp" class="close">×</a>
<div class="help-content" v-html="helpContent"></div>
</div>
<transition name="cardanim">
<div class="card" v-if="cardShow" v-cloak>
<div class="cardcode" v-html="currCard"></div>
<div class="title" v-html="currCardName"></div>
<div class="data">
<h2>Targets of opportunity</h2>
<ul>
<li v-for="action in currCardTarget" v-html="action"></li>
</ul>
</div>
<!-- <div class="divider">
<div><svg><use xlink:href="#caret-down"/></svg></div>
</div> -->
<div class="data">
<h2>Actions</h2>
<ul>
<li v-for="action in currCardAction" v-html="action"></li>
</ul>
</div>
<div v-if="currCardAction2">
<div class="divider">
<div><svg class="alert"><use xlink:href="#alert"/></svg></div>
</div>
<div class="data">
<ul class="etc">
<li v-for="action in currCardAction2" v-html="action"></li>
</ul>
</div>
</div>
<div v-if="currCardEtc">
<div class="divider">
<div><svg class="else"><use xlink:href="#help"/></svg></div>
</div>
<div class="data">
<ul class="etc">
<li v-for="action in currCardEtc" v-html="action"></li>
</ul>
</div>
</div>
</div>
</transition>
<div class="nav buttons">
<button @click.prevent="launchHelp">?</button>
<button @click.prevent="getAICard" :disabled="disableButton" class="mainbtn">Draw AI Card</button>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="icon-map">
<symbol id="caret-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M5 6h10l-5 9-5-9z"/>
</symbol>
<symbol id="alert" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M18.7 12.3L17 10.8a1 1 0 010-1.6l1.7-1.6c.5-.4.4-.8-.3-.9L16 6.5c-.7 0-1-.6-.8-1.3L16.5 2c.3-.7 0-1-.6-.6L13.2 3c-.6.4-1.3.2-1.6-.4l-1-1.8c-.3-.5-.9-.5-1.2 0l-1 1.6c-.3.6-1 .8-1.6.6l-1.6-.8c-.6-.2-1.1 0-1 .8v1.6c0 .6-.4 1.3-1 1.5l-1.6.4c-.7.2-.8.7-.3 1.1L3 9.2a1 1 0 010 1.6l-1.7 1.5c-.5.5-.4 1 .3 1l2.1.3c.7 0 1 .6.8 1.3l-1 3.2c-.3.7 0 1 .6.6l2.5-1.4c.6-.4 1.3-.2 1.7.4l1 1.5c.4.6 1 .5 1.3 0l.9-1.8c.3-.6 1-.8 1.6-.5l1.7.8c.6.3 1.1 0 1-.7v-1.6c0-.7.4-1.3 1-1.5l1.6-.4c.7-.2.8-.7.3-1.2zM11 14H9v-2h2v2zm0-3H9V6h2v5z"/>
</symbol>
<symbol id="help" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 .4a9.6 9.6 0 100 19.2A9.6 9.6 0 0010 .4zm-.2 15.2c-.8 0-1.3-.6-1.3-1.4 0-.7.6-1.3 1.3-1.3.9 0 1.4.6 1.4 1.4 0 .8-.6 1.3-1.4 1.3zm3.3-6.5l-1 1-.6.3-.6.7v.6H8.6c0-.8 0-1.3.3-1.6.5-.6 1.6-1.3 1.6-1.3l.4-.4.3-.8c0-.3 0-.6-.2-1-.2-.2-.6-.3-1.1-.3-.5 0-.9.1-1 .5a2 2 0 00-.4 1V8H6.4c0-1.4.5-2.4 1.4-3 .6-.3 1.3-.5 2.1-.5 1 0 2 .3 2.7.8.7.5 1 1.3 1 2.3 0 .6-.1 1-.5 1.6z"/>
</symbol>
<symbol id="erm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M10 7.8a2.2 2.2 0 100 4.4 2.2 2.2 0 000-4.4zm-7 0a2.2 2.2 0 100 4.4 2.2 2.2 0 000-4.4zm14 0a2.2 2.2 0 100 4.4 2.2 2.2 0 000-4.4z"/>
</symbol>
</svg>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/markdown-it@10.0.0/dist/markdown-it.min.js"></script>
<script src="app/app.min.js"></script>
</body>
</html>