jake-walker · November 20, 2019 17:43
diff --git a/secret-santa.html b/secret-santa.html
 <!--
    Secret Santa Card Generator by Jake Walker.

    This is a quick and dirty web app for generating cards to be used for the
    'Fool-Proof Secret Santa' video by Numberphile - https://www.youtube.com/watch?v=GhnCj7Fvqt0.

    Save this HTML file to your computer and open in your favourite browser, then
    follow the instructions on the page. This is designed to be printer friendly
    so they do look a bit bland.
 -->

 <html>
    <head>
        <title>Secret Santa Cards</title>

        <link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">

        <style>
            body {
                font-family: "Lobster", cursive;
                font-size: 1.2em;
            }

            table {
                width: 100%;
            }

            table, th, td {
                border: 2px solid red;
                border-collapse: collapse;
                white-space: nowrap;
            }

            th, td {
                width: 50%;
                text-align: center;
                padding: 7;
            }

            .number {
                font-size: 1.4em;
            }

            @media print {
                #message {
                    display: none;
                }

                table {
                    page-break-inside: auto !important;
                }

                tr {
                    page-break-inside: avoid !important;
                    page-break-after: auto !important;
                }
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div id="message">
                <p>
                    This is a simple web app for generating cards for the video <a href="https://www.youtube.com/watch?v=GhnCj7Fvqt0">'Fool-Proof Secret Santa' by Numberphile</a>.
                    Using this method stops people from getting themselves and makes things more fair. Type in the number
                    of people playing below and print the page, then watch the video for instructions on how to deal the
                    cards.
                </p>
                <p>
                    Number of people: <input type="number" v-model="people">
                </p>
            </div>

            <table>
                <tr v-for="i in parseInt(people)" :key="index">
                    <td>
                        You are number<br>
                        <span class="number">{{ i }}</span>
                    </td>
                    <td>
                        You are buying a gift for number<br>
                        <span class="number">{{ i }}</span>
                    </td>
                </tr>
            </table>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    people: 30
                }
            })
        </script>
    </body>
 </html>
	<!--
	Secret Santa Card Generator by Jake Walker.

	This is a quick and dirty web app for generating cards to be used for the
	'Fool-Proof Secret Santa' video by Numberphile - https://www.youtube.com/watch?v=GhnCj7Fvqt0.

	Save this HTML file to your computer and open in your favourite browser, then
	follow the instructions on the page. This is designed to be printer friendly
	so they do look a bit bland.
	-->

	<html>
	<head>
	<title>Secret Santa Cards</title>

	<link href="https://fonts.googleapis.com/css?family=Lobster&display=swap" rel="stylesheet">

	<style>
	body {
	font-family: "Lobster", cursive;
	font-size: 1.2em;
	}

	table {
	width: 100%;
	}

	table, th, td {
	border: 2px solid red;
	border-collapse: collapse;
	white-space: nowrap;
	}

	th, td {
	width: 50%;
	text-align: center;
	padding: 7;
	}

	.number {
	font-size: 1.4em;
	}

	@media print {
	#message {
	display: none;
	}

	table {
	page-break-inside: auto !important;
	}

	tr {
	page-break-inside: avoid !important;
	page-break-after: auto !important;
	}
	}
	</style>
	</head>
	<body>
	<div id="app">
	<div id="message">
	<p>
	This is a simple web app for generating cards for the video <a href="https://www.youtube.com/watch?v=GhnCj7Fvqt0">'Fool-Proof Secret Santa' by Numberphile</a>.
	Using this method stops people from getting themselves and makes things more fair. Type in the number
	of people playing below and print the page, then watch the video for instructions on how to deal the
	cards.
	</p>
	<p>
	Number of people: <input type="number" v-model="people">
	</p>
	</div>

	<table>
	<tr v-for="i in parseInt(people)" :key="index">
	<td>
	You are number<br>
	<span class="number">{{ i }}</span>
	</td>
	<td>
	You are buying a gift for number<br>
	<span class="number">{{ i }}</span>
	</td>
	</tr>
	</table>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
	var app = new Vue({
	el: "#app",
	data: {
	people: 30
	}
	})
	</script>
	</body>
	</html>