Richienb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    What is this?

It's a Mailto generator taking advantage of MDL.

  
## index.html
<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mailto for MDL</title>
</head>

<body>

    <section class="demo-card-square mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title mdl-card--expand">
            <h2 class="mdl-card__title-text">Contact Me</h2>
        </div>
        <div class="mdl-card__supporting-text">
            <!-- Subject Field -->
            <form action="#">
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text" id="subject" required>
                    <label class="mdl-textfield__label" for="subject">Subject</label>
                </div>
                <!-- Message Field -->
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                    <input class="mdl-textfield__input" type="text" id="body" required>
                    <label class="mdl-textfield__label" for="body">Message</label>
                </div>

                <!-- Submit Button -->
                <input onclick="buildString(); " type="submit" value="Send" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">

                </input>
            </form>
        </div>
    </section>
</body>

<footer>
    <!-- Initialise MDL -->
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/material-design-lite@1/dist/material.indigo-red.min.css">
    <script async defer src="https://cdn.jsdelivr.net/gh/google/material-design-lite@1.3/material.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Roboto" rel="stylesheet">

    <!-- Custom CSS-->
    <style>
        .demo-card-square.mdl-card {
            width: 320px;
            height: 320px;
        }

        .demo-card-square>.mdl-card__title {
            color: #fff;
            background: url('') bottom right 15% no-repeat #f44336;
        }

        html {
            font-family: "Roboto", sans-serif;
        }
    </style>

    <!-- Custom JS -->
    <script async defer>
        function buildString() {
            var email = "richiebendall@gmail.com",
                to = email,
                subject = encodeURIComponent(document.getElementById("subject").value),
                body = encodeURIComponent(document.getElementById("body").value),
                message = "";
            email.className = "not";
            message = "mailto:" + to;
            subject || body ? (message += "?") : false;
            subject ? (message += "subject=" + subject) : false;
            subject && body ? (message += "&body=" + body) : false;
            !subject && body ? (message += "body=" + body) : false;
            window.open(message);
        }
    </script>
</footer>

</html>
	<!DOCTYPE html>

	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Mailto for MDL</title>
	</head>

	<body>

	<section class="demo-card-square mdl-card mdl-shadow--2dp">
	<div class="mdl-card__title mdl-card--expand">
	<h2 class="mdl-card__title-text">Contact Me</h2>
	</div>
	<div class="mdl-card__supporting-text">
	<!-- Subject Field -->
	<form action="#">
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
	<input class="mdl-textfield__input" type="text" id="subject" required>
	<label class="mdl-textfield__label" for="subject">Subject</label>
	</div>
	<!-- Message Field -->
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
	<input class="mdl-textfield__input" type="text" id="body" required>
	<label class="mdl-textfield__label" for="body">Message</label>
	</div>

	<!-- Submit Button -->
	<input onclick="buildString(); " type="submit" value="Send" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">

	</input>
	</form>
	</div>
	</section>
	</body>

	<footer>
	<!-- Initialise MDL -->
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/material-design-lite@1/dist/material.indigo-red.min.css">
	<script async defer src="https://cdn.jsdelivr.net/gh/google/material-design-lite@1.3/material.min.js"></script>
	<link href="https://fonts.googleapis.com/icon?family=Roboto" rel="stylesheet">

	<!-- Custom CSS-->
	<style>
	.demo-card-square.mdl-card {
	width: 320px;
	height: 320px;
	}

	.demo-card-square>.mdl-card__title {
	color: #fff;
	background: url('') bottom right 15% no-repeat #f44336;
	}

	html {
	font-family: "Roboto", sans-serif;
	}
	</style>

	<!-- Custom JS -->
	<script async defer>
	function buildString() {
	var email = "richiebendall@gmail.com",
	to = email,
	subject = encodeURIComponent(document.getElementById("subject").value),
	body = encodeURIComponent(document.getElementById("body").value),
	message = "";
	email.className = "not";
	message = "mailto:" + to;
	subject \|\| body ? (message += "?") : false;
	subject ? (message += "subject=" + subject) : false;
	subject && body ? (message += "&body=" + body) : false;
	!subject && body ? (message += "body=" + body) : false;
	window.open(message);
	}
	</script>
	</footer>

	</html>