Move logos to this repo
This commit is contained in:
@@ -3,20 +3,20 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
<link rel="icon" sizes="192x192" href="/images/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
<link rel="icon" sizes="192x192" href="/images/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="{{ page.title }}">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
|
||||
<link rel="apple-touch-icon-precomposed" href="/images/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
|
||||
<meta name="msapplication-TileImage" content="/images/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#c72a32">
|
||||
|
||||
<!-- page info -->
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
|
||||
<img src="/images/logo-clear-square.png" class="logo" />
|
||||
<a class="logo" href="/">Matthew Grove</a>
|
||||
<nav>
|
||||
<a href="#menu">Menu</a>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
<!-- Banner -->
|
||||
<section id="banner">
|
||||
<div class="inner">
|
||||
<img src="https://mgrove.uk/logo-clear-square.png" class="banner-logo" />
|
||||
<img src="/images/logo-clear-square.png" class="banner-logo" />
|
||||
<h1>Matthew Grove</h1>
|
||||
<p>{{ page.description }}</p>
|
||||
</div>
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
demo.mgrove.uk
|
||||
@@ -1,2 +0,0 @@
|
||||
# Demo Site
|
||||
The code for [my demo site](https://demo.mgrove.uk) - which hosts small coding projects that I do.
|
||||
4
_site/assets/css/font-awesome.min.css
vendored
4
_site/assets/css/font-awesome.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
Before Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,165 +0,0 @@
|
||||
/*!
|
||||
* JavaScript Cookie v2.2.0
|
||||
* https://github.com/js-cookie/js-cookie
|
||||
*
|
||||
* Copyright 2006, 2015 Klaus Hartl & Fagner Brack
|
||||
* Released under the MIT license
|
||||
*/
|
||||
;(function (factory) {
|
||||
var registeredInModuleLoader = false;
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
define(factory);
|
||||
registeredInModuleLoader = true;
|
||||
}
|
||||
if (typeof exports === 'object') {
|
||||
module.exports = factory();
|
||||
registeredInModuleLoader = true;
|
||||
}
|
||||
if (!registeredInModuleLoader) {
|
||||
var OldCookies = window.Cookies;
|
||||
var api = window.Cookies = factory();
|
||||
api.noConflict = function () {
|
||||
window.Cookies = OldCookies;
|
||||
return api;
|
||||
};
|
||||
}
|
||||
}(function () {
|
||||
function extend () {
|
||||
var i = 0;
|
||||
var result = {};
|
||||
for (; i < arguments.length; i++) {
|
||||
var attributes = arguments[ i ];
|
||||
for (var key in attributes) {
|
||||
result[key] = attributes[key];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function init (converter) {
|
||||
function api (key, value, attributes) {
|
||||
var result;
|
||||
if (typeof document === 'undefined') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Write
|
||||
|
||||
if (arguments.length > 1) {
|
||||
attributes = extend({
|
||||
path: '/'
|
||||
}, api.defaults, attributes);
|
||||
|
||||
if (typeof attributes.expires === 'number') {
|
||||
var expires = new Date();
|
||||
expires.setMilliseconds(expires.getMilliseconds() + attributes.expires * 864e+5);
|
||||
attributes.expires = expires;
|
||||
}
|
||||
|
||||
// We're using "expires" because "max-age" is not supported by IE
|
||||
attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
|
||||
|
||||
try {
|
||||
result = JSON.stringify(value);
|
||||
if (/^[\{\[]/.test(result)) {
|
||||
value = result;
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
if (!converter.write) {
|
||||
value = encodeURIComponent(String(value))
|
||||
.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
|
||||
} else {
|
||||
value = converter.write(value, key);
|
||||
}
|
||||
|
||||
key = encodeURIComponent(String(key));
|
||||
key = key.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent);
|
||||
key = key.replace(/[\(\)]/g, escape);
|
||||
|
||||
var stringifiedAttributes = '';
|
||||
|
||||
for (var attributeName in attributes) {
|
||||
if (!attributes[attributeName]) {
|
||||
continue;
|
||||
}
|
||||
stringifiedAttributes += '; ' + attributeName;
|
||||
if (attributes[attributeName] === true) {
|
||||
continue;
|
||||
}
|
||||
stringifiedAttributes += '=' + attributes[attributeName];
|
||||
}
|
||||
return (document.cookie = key + '=' + value + stringifiedAttributes);
|
||||
}
|
||||
|
||||
// Read
|
||||
|
||||
if (!key) {
|
||||
result = {};
|
||||
}
|
||||
|
||||
// To prevent the for loop in the first place assign an empty array
|
||||
// in case there are no cookies at all. Also prevents odd result when
|
||||
// calling "get()"
|
||||
var cookies = document.cookie ? document.cookie.split('; ') : [];
|
||||
var rdecode = /(%[0-9A-Z]{2})+/g;
|
||||
var i = 0;
|
||||
|
||||
for (; i < cookies.length; i++) {
|
||||
var parts = cookies[i].split('=');
|
||||
var cookie = parts.slice(1).join('=');
|
||||
|
||||
if (!this.json && cookie.charAt(0) === '"') {
|
||||
cookie = cookie.slice(1, -1);
|
||||
}
|
||||
|
||||
try {
|
||||
var name = parts[0].replace(rdecode, decodeURIComponent);
|
||||
cookie = converter.read ?
|
||||
converter.read(cookie, name) : converter(cookie, name) ||
|
||||
cookie.replace(rdecode, decodeURIComponent);
|
||||
|
||||
if (this.json) {
|
||||
try {
|
||||
cookie = JSON.parse(cookie);
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
if (key === name) {
|
||||
result = cookie;
|
||||
break;
|
||||
}
|
||||
|
||||
if (!key) {
|
||||
result[name] = cookie;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
api.set = api;
|
||||
api.get = function (key) {
|
||||
return api.call(api, key);
|
||||
};
|
||||
api.getJSON = function () {
|
||||
return api.apply({
|
||||
json: true
|
||||
}, [].slice.call(arguments));
|
||||
};
|
||||
api.defaults = {};
|
||||
|
||||
api.remove = function (key, attributes) {
|
||||
api(key, '', extend(attributes, {
|
||||
expires: -1
|
||||
}));
|
||||
};
|
||||
|
||||
api.withConverter = init;
|
||||
|
||||
return api;
|
||||
}
|
||||
|
||||
return init(function () {});
|
||||
}));
|
||||
4
_site/assets/js/jquery.min.js
vendored
4
_site/assets/js/jquery.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,39 +0,0 @@
|
||||
(function($) {
|
||||
|
||||
var $window = $(window),
|
||||
$banner = $('#banner'),
|
||||
$body = $('body');
|
||||
|
||||
// Play initial animations on page load.
|
||||
$window.on('load', function() {
|
||||
window.setTimeout(function() {
|
||||
$body.removeClass('is-preload');
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Menu.
|
||||
$('#menu')
|
||||
.append('<a href="#menu" class="close"></a>')
|
||||
.appendTo($body)
|
||||
.panel({
|
||||
target: $body,
|
||||
visibleClass: 'is-menu-visible',
|
||||
delay: 500,
|
||||
hideOnClick: true,
|
||||
hideOnSwipe: true,
|
||||
resetScroll: true,
|
||||
resetForms: true,
|
||||
side: 'right'
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
|
||||
if (Cookies.get("demo.mgrove.uk-cookies-accepted") != "true") {
|
||||
$("#cookies").show();
|
||||
$("#cookies").animate({ bottom: "0px" }, 1000);
|
||||
$("#close-cookies").click(function () {
|
||||
$("#cookies").animate({ bottom: "-100px" }, 1000);
|
||||
setTimeout(function () { $("#cookies").hide() }, 1000);
|
||||
Cookies.set("demo.mgrove.uk-cookies-accepted", "true", { expires: 30 });
|
||||
});
|
||||
}
|
||||
@@ -1,587 +0,0 @@
|
||||
(function($) {
|
||||
|
||||
/**
|
||||
* Generate an indented list of links from a nav. Meant for use with panel().
|
||||
* @return {jQuery} jQuery object.
|
||||
*/
|
||||
$.fn.navList = function() {
|
||||
|
||||
var $this = $(this);
|
||||
$a = $this.find('a'),
|
||||
b = [];
|
||||
|
||||
$a.each(function() {
|
||||
|
||||
var $this = $(this),
|
||||
indent = Math.max(0, $this.parents('li').length - 1),
|
||||
href = $this.attr('href'),
|
||||
target = $this.attr('target');
|
||||
|
||||
b.push(
|
||||
'<a ' +
|
||||
'class="link depth-' + indent + '"' +
|
||||
( (typeof target !== 'undefined' && target != '') ? ' target="' + target + '"' : '') +
|
||||
( (typeof href !== 'undefined' && href != '') ? ' href="' + href + '"' : '') +
|
||||
'>' +
|
||||
'<span class="indent-' + indent + '"></span>' +
|
||||
$this.text() +
|
||||
'</a>'
|
||||
);
|
||||
|
||||
});
|
||||
|
||||
return b.join('');
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Panel-ify an element.
|
||||
* @param {object} userConfig User config.
|
||||
* @return {jQuery} jQuery object.
|
||||
*/
|
||||
$.fn.panel = function(userConfig) {
|
||||
|
||||
// No elements?
|
||||
if (this.length == 0)
|
||||
return $this;
|
||||
|
||||
// Multiple elements?
|
||||
if (this.length > 1) {
|
||||
|
||||
for (var i=0; i < this.length; i++)
|
||||
$(this[i]).panel(userConfig);
|
||||
|
||||
return $this;
|
||||
|
||||
}
|
||||
|
||||
// Vars.
|
||||
var $this = $(this),
|
||||
$body = $('body'),
|
||||
$window = $(window),
|
||||
id = $this.attr('id'),
|
||||
config;
|
||||
|
||||
// Config.
|
||||
config = $.extend({
|
||||
|
||||
// Delay.
|
||||
delay: 0,
|
||||
|
||||
// Hide panel on link click.
|
||||
hideOnClick: false,
|
||||
|
||||
// Hide panel on escape keypress.
|
||||
hideOnEscape: false,
|
||||
|
||||
// Hide panel on swipe.
|
||||
hideOnSwipe: false,
|
||||
|
||||
// Reset scroll position on hide.
|
||||
resetScroll: false,
|
||||
|
||||
// Reset forms on hide.
|
||||
resetForms: false,
|
||||
|
||||
// Side of viewport the panel will appear.
|
||||
side: null,
|
||||
|
||||
// Target element for "class".
|
||||
target: $this,
|
||||
|
||||
// Class to toggle.
|
||||
visibleClass: 'visible'
|
||||
|
||||
}, userConfig);
|
||||
|
||||
// Expand "target" if it's not a jQuery object already.
|
||||
if (typeof config.target != 'jQuery')
|
||||
config.target = $(config.target);
|
||||
|
||||
// Panel.
|
||||
|
||||
// Methods.
|
||||
$this._hide = function(event) {
|
||||
|
||||
// Already hidden? Bail.
|
||||
if (!config.target.hasClass(config.visibleClass))
|
||||
return;
|
||||
|
||||
// If an event was provided, cancel it.
|
||||
if (event) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
}
|
||||
|
||||
// Hide.
|
||||
config.target.removeClass(config.visibleClass);
|
||||
|
||||
// Post-hide stuff.
|
||||
window.setTimeout(function() {
|
||||
|
||||
// Reset scroll position.
|
||||
if (config.resetScroll)
|
||||
$this.scrollTop(0);
|
||||
|
||||
// Reset forms.
|
||||
if (config.resetForms)
|
||||
$this.find('form').each(function() {
|
||||
this.reset();
|
||||
});
|
||||
|
||||
}, config.delay);
|
||||
|
||||
};
|
||||
|
||||
// Vendor fixes.
|
||||
$this
|
||||
.css('-ms-overflow-style', '-ms-autohiding-scrollbar')
|
||||
.css('-webkit-overflow-scrolling', 'touch');
|
||||
|
||||
// Hide on click.
|
||||
if (config.hideOnClick) {
|
||||
|
||||
$this.find('a')
|
||||
.css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)');
|
||||
|
||||
$this
|
||||
.on('click', 'a', function(event) {
|
||||
|
||||
var $a = $(this),
|
||||
href = $a.attr('href'),
|
||||
target = $a.attr('target');
|
||||
|
||||
if (!href || href == '#' || href == '' || href == '#' + id)
|
||||
return;
|
||||
|
||||
// Cancel original event.
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
// Hide panel.
|
||||
$this._hide();
|
||||
|
||||
// Redirect to href.
|
||||
window.setTimeout(function() {
|
||||
|
||||
if (target == '_blank')
|
||||
window.open(href);
|
||||
else
|
||||
window.location.href = href;
|
||||
|
||||
}, config.delay + 10);
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// Event: Touch stuff.
|
||||
$this.on('touchstart', function(event) {
|
||||
|
||||
$this.touchPosX = event.originalEvent.touches[0].pageX;
|
||||
$this.touchPosY = event.originalEvent.touches[0].pageY;
|
||||
|
||||
})
|
||||
|
||||
$this.on('touchmove', function(event) {
|
||||
|
||||
if ($this.touchPosX === null
|
||||
|| $this.touchPosY === null)
|
||||
return;
|
||||
|
||||
var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX,
|
||||
diffY = $this.touchPosY - event.originalEvent.touches[0].pageY,
|
||||
th = $this.outerHeight(),
|
||||
ts = ($this.get(0).scrollHeight - $this.scrollTop());
|
||||
|
||||
// Hide on swipe?
|
||||
if (config.hideOnSwipe) {
|
||||
|
||||
var result = false,
|
||||
boundary = 20,
|
||||
delta = 50;
|
||||
|
||||
switch (config.side) {
|
||||
|
||||
case 'left':
|
||||
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta);
|
||||
break;
|
||||
|
||||
case 'right':
|
||||
result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta));
|
||||
break;
|
||||
|
||||
case 'top':
|
||||
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta);
|
||||
break;
|
||||
|
||||
case 'bottom':
|
||||
result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta));
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
|
||||
}
|
||||
|
||||
if (result) {
|
||||
|
||||
$this.touchPosX = null;
|
||||
$this.touchPosY = null;
|
||||
$this._hide();
|
||||
|
||||
return false;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Prevent vertical scrolling past the top or bottom.
|
||||
if (($this.scrollTop() < 0 && diffY < 0)
|
||||
|| (ts > (th - 2) && ts < (th + 2) && diffY > 0)) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Event: Prevent certain events inside the panel from bubbling.
|
||||
$this.on('click touchend touchstart touchmove', function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
// Event: Hide panel if a child anchor tag pointing to its ID is clicked.
|
||||
$this.on('click', 'a[href="#' + id + '"]', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
config.target.removeClass(config.visibleClass);
|
||||
|
||||
});
|
||||
|
||||
// Body.
|
||||
|
||||
// Event: Hide panel on body click/tap.
|
||||
$body.on('click touchend', function(event) {
|
||||
$this._hide(event);
|
||||
});
|
||||
|
||||
// Event: Toggle.
|
||||
$body.on('click', 'a[href="#' + id + '"]', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
config.target.toggleClass(config.visibleClass);
|
||||
|
||||
});
|
||||
|
||||
// Window.
|
||||
|
||||
// Event: Hide on ESC.
|
||||
if (config.hideOnEscape)
|
||||
$window.on('keydown', function(event) {
|
||||
|
||||
if (event.keyCode == 27)
|
||||
$this._hide(event);
|
||||
|
||||
});
|
||||
|
||||
return $this;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Apply "placeholder" attribute polyfill to one or more forms.
|
||||
* @return {jQuery} jQuery object.
|
||||
*/
|
||||
$.fn.placeholder = function() {
|
||||
|
||||
// Browser natively supports placeholders? Bail.
|
||||
if (typeof (document.createElement('input')).placeholder != 'undefined')
|
||||
return $(this);
|
||||
|
||||
// No elements?
|
||||
if (this.length == 0)
|
||||
return $this;
|
||||
|
||||
// Multiple elements?
|
||||
if (this.length > 1) {
|
||||
|
||||
for (var i=0; i < this.length; i++)
|
||||
$(this[i]).placeholder();
|
||||
|
||||
return $this;
|
||||
|
||||
}
|
||||
|
||||
// Vars.
|
||||
var $this = $(this);
|
||||
|
||||
// Text, TextArea.
|
||||
$this.find('input[type=text],textarea')
|
||||
.each(function() {
|
||||
|
||||
var i = $(this);
|
||||
|
||||
if (i.val() == ''
|
||||
|| i.val() == i.attr('placeholder'))
|
||||
i
|
||||
.addClass('polyfill-placeholder')
|
||||
.val(i.attr('placeholder'));
|
||||
|
||||
})
|
||||
.on('blur', function() {
|
||||
|
||||
var i = $(this);
|
||||
|
||||
if (i.attr('name').match(/-polyfill-field$/))
|
||||
return;
|
||||
|
||||
if (i.val() == '')
|
||||
i
|
||||
.addClass('polyfill-placeholder')
|
||||
.val(i.attr('placeholder'));
|
||||
|
||||
})
|
||||
.on('focus', function() {
|
||||
|
||||
var i = $(this);
|
||||
|
||||
if (i.attr('name').match(/-polyfill-field$/))
|
||||
return;
|
||||
|
||||
if (i.val() == i.attr('placeholder'))
|
||||
i
|
||||
.removeClass('polyfill-placeholder')
|
||||
.val('');
|
||||
|
||||
});
|
||||
|
||||
// Password.
|
||||
$this.find('input[type=password]')
|
||||
.each(function() {
|
||||
|
||||
var i = $(this);
|
||||
var x = $(
|
||||
$('<div>')
|
||||
.append(i.clone())
|
||||
.remove()
|
||||
.html()
|
||||
.replace(/type="password"/i, 'type="text"')
|
||||
.replace(/type=password/i, 'type=text')
|
||||
);
|
||||
|
||||
if (i.attr('id') != '')
|
||||
x.attr('id', i.attr('id') + '-polyfill-field');
|
||||
|
||||
if (i.attr('name') != '')
|
||||
x.attr('name', i.attr('name') + '-polyfill-field');
|
||||
|
||||
x.addClass('polyfill-placeholder')
|
||||
.val(x.attr('placeholder')).insertAfter(i);
|
||||
|
||||
if (i.val() == '')
|
||||
i.hide();
|
||||
else
|
||||
x.hide();
|
||||
|
||||
i
|
||||
.on('blur', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
|
||||
|
||||
if (i.val() == '') {
|
||||
|
||||
i.hide();
|
||||
x.show();
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
x
|
||||
.on('focus', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']');
|
||||
|
||||
x.hide();
|
||||
|
||||
i
|
||||
.show()
|
||||
.focus();
|
||||
|
||||
})
|
||||
.on('keypress', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
x.val('');
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
// Events.
|
||||
$this
|
||||
.on('submit', function() {
|
||||
|
||||
$this.find('input[type=text],input[type=password],textarea')
|
||||
.each(function(event) {
|
||||
|
||||
var i = $(this);
|
||||
|
||||
if (i.attr('name').match(/-polyfill-field$/))
|
||||
i.attr('name', '');
|
||||
|
||||
if (i.val() == i.attr('placeholder')) {
|
||||
|
||||
i.removeClass('polyfill-placeholder');
|
||||
i.val('');
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
.on('reset', function(event) {
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
$this.find('select')
|
||||
.val($('option:first').val());
|
||||
|
||||
$this.find('input,textarea')
|
||||
.each(function() {
|
||||
|
||||
var i = $(this),
|
||||
x;
|
||||
|
||||
i.removeClass('polyfill-placeholder');
|
||||
|
||||
switch (this.type) {
|
||||
|
||||
case 'submit':
|
||||
case 'reset':
|
||||
break;
|
||||
|
||||
case 'password':
|
||||
i.val(i.attr('defaultValue'));
|
||||
|
||||
x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]');
|
||||
|
||||
if (i.val() == '') {
|
||||
i.hide();
|
||||
x.show();
|
||||
}
|
||||
else {
|
||||
i.show();
|
||||
x.hide();
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 'checkbox':
|
||||
case 'radio':
|
||||
i.attr('checked', i.attr('defaultValue'));
|
||||
break;
|
||||
|
||||
case 'text':
|
||||
case 'textarea':
|
||||
i.val(i.attr('defaultValue'));
|
||||
|
||||
if (i.val() == '') {
|
||||
i.addClass('polyfill-placeholder');
|
||||
i.val(i.attr('placeholder'));
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
i.val(i.attr('defaultValue'));
|
||||
break;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
return $this;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Moves elements to/from the first positions of their respective parents.
|
||||
* @param {jQuery} $elements Elements (or selector) to move.
|
||||
* @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations.
|
||||
*/
|
||||
$.prioritize = function($elements, condition) {
|
||||
|
||||
var key = '__prioritize';
|
||||
|
||||
// Expand $elements if it's not already a jQuery object.
|
||||
if (typeof $elements != 'jQuery')
|
||||
$elements = $($elements);
|
||||
|
||||
// Step through elements.
|
||||
$elements.each(function() {
|
||||
|
||||
var $e = $(this), $p,
|
||||
$parent = $e.parent();
|
||||
|
||||
// No parent? Bail.
|
||||
if ($parent.length == 0)
|
||||
return;
|
||||
|
||||
// Not moved? Move it.
|
||||
if (!$e.data(key)) {
|
||||
|
||||
// Condition is false? Bail.
|
||||
if (!condition)
|
||||
return;
|
||||
|
||||
// Get placeholder (which will serve as our point of reference for when this element needs to move back).
|
||||
$p = $e.prev();
|
||||
|
||||
// Couldn't find anything? Means this element's already at the top, so bail.
|
||||
if ($p.length == 0)
|
||||
return;
|
||||
|
||||
// Move element to top of parent.
|
||||
$e.prependTo($parent);
|
||||
|
||||
// Mark element as moved.
|
||||
$e.data(key, $p);
|
||||
|
||||
}
|
||||
|
||||
// Moved already?
|
||||
else {
|
||||
|
||||
// Condition is true? Bail.
|
||||
if (condition)
|
||||
return;
|
||||
|
||||
$p = $e.data(key);
|
||||
|
||||
// Move element back to its original location (using our placeholder).
|
||||
$e.insertAfter($p);
|
||||
|
||||
// Unmark element as moved.
|
||||
$e.removeData(key);
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -1,195 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Computer Science">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#c72a32">
|
||||
|
||||
<!-- page info -->
|
||||
<title>Computer Science | Matthew Grove</title>
|
||||
<meta name="description" content="Some helpful tips for studying Computer Science.">
|
||||
<meta name="keywords" content="" />
|
||||
|
||||
<!-- stylesheets -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-2');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<script src="/assets/js/jquery.min.js"></script>
|
||||
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
|
||||
<a class="logo" href="/">Matthew Grove</a>
|
||||
<nav>
|
||||
<a href="#menu">Menu</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="menu">
|
||||
<ul class="links">
|
||||
<li><a href="/" class="">Home</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/young-reporter/" class="">BBC Young Reporter Article Generator</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blackthunder.gq" class="">Black Thunder</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blog.mgrove.uk" class="">Blog</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/comsci/" class="current-page-link">Computer Science</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" class="">Dogs</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/luhn-algorithm/" class="">Luhn Algorithm</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" class="">Photography Feed</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://youngreporter.mgrove.uk" class="">Reading School BBC Young Reporter</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/site-theme/" class="">Site Theme</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://traqua.ml" class="">Traqua</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Heading -->
|
||||
<div id="heading">
|
||||
<h1>Computer Science</h1>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<section id="main" class="wrapper">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<meta http-equiv="refresh" content="0;URL='https://www.youtube.com/watch?v=oHg5SJYRHA0'" />
|
||||
|
||||
<p>This page is loading. If it doesn’t load within five seconds, please click <a href="https://www.youtube.com/watch?v=oHg5SJYRHA0">here</a></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<section>
|
||||
<h3>Matthew Grove</h3>
|
||||
<p>Software engineer & amateur photographer from Surrey, UK.</p>
|
||||
<p><a href="https://github.com/mgrove36/demo-code/tree/master/comsci/">View this page on GitHub.</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Other Links</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i class="icon fa-camera"> </i>Photography</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i class="icon fa-paw"> </i>Dogs</a></li>
|
||||
|
||||
<li><a href="mailto:me@mgrove.uk" target="_blank"><i class="icon fa-envelope"> </i>Email me</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Social Media</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github"> </i>GitHub</a></li>
|
||||
|
||||
<li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter"> </i>Twitter</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram"> </i>Instagram</a></li>
|
||||
|
||||
<li><a href="https://linkedin.com/in/mgrove36" target="_blank"><i class="icon fa-linkedin"> </i>LinkedIn</a></li>
|
||||
|
||||
<li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook"> </i>Facebook</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© Matthew Grove 2020.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/assets/js/cookies.js"></script>
|
||||
<script src="/assets/js/util.js"></script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,2 +0,0 @@
|
||||
name: Demo Site | Matthew Grove
|
||||
title: Demo Site | Matthew Grove
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 857 KiB |
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 507 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 446 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 857 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
348
_site/index.html
348
_site/index.html
@@ -1,348 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Demo Site">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#c72a32">
|
||||
|
||||
<!-- page info -->
|
||||
<title>Demo Site | Matthew Grove</title>
|
||||
<meta name="description" content="My demo site - where I host small coding projects and demonstrations.">
|
||||
<meta name="keywords" content="" />
|
||||
|
||||
<!-- stylesheets -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-2');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<script src="/assets/js/jquery.min.js"></script>
|
||||
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
|
||||
<a class="logo" href="/">Matthew Grove</a>
|
||||
<nav>
|
||||
<a href="#menu">Menu</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="menu">
|
||||
<ul class="links">
|
||||
<li><a href="/" class="current-page-link">Home</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/young-reporter/" class="">BBC Young Reporter Article Generator</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blackthunder.gq" class="">Black Thunder</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blog.mgrove.uk" class="">Blog</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/comsci/" class="">Computer Science</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" class="">Dogs</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/luhn-algorithm/" class="">Luhn Algorithm</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" class="">Photography Feed</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://youngreporter.mgrove.uk" class="">Reading School BBC Young Reporter</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/site-theme/" class="">Site Theme</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://traqua.ml" class="">Traqua</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Banner -->
|
||||
<section id="banner">
|
||||
<div class="inner">
|
||||
<img src="https://mgrove.uk/logo-clear-square.png" class="banner-logo" />
|
||||
<h1>Matthew Grove</h1>
|
||||
<p>My demo site - where I host small coding projects and demonstrations.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Highlights -->
|
||||
<section class="wrapper">
|
||||
<div class="inner">
|
||||
<header class="special">
|
||||
<h2>Projects</h2>
|
||||
<p><p>Got some ideas for me? <a href="https://goo.gl/forms/qXO1cwSbE4FoQHdq2">Leave them here.</a></p>
|
||||
</a></p>
|
||||
</header>
|
||||
<div class="highlights">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="/young-reporter/" class="icon fa-comment"><span class="label"></span></a>
|
||||
<h3>BBC Young Reporter Article Generator</h3>
|
||||
</header>
|
||||
<p>A tool to create markdown files from news articles and their metadata for uploading to the Reading School BBC Young Reporter website.</p>
|
||||
<a href="/young-reporter/" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="https://blackthunder.gq" class="icon fa-bolt"><span class="label"></span></a>
|
||||
<h3>Black Thunder</h3>
|
||||
</header>
|
||||
<p>Reading School's robotics team, which also runs the school's Robotics Club.</p>
|
||||
<a href="https://blackthunder.gq" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="https://blog.mgrove.uk" class="icon fa-pencil"><span class="label"></span></a>
|
||||
<h3>Blog</h3>
|
||||
</header>
|
||||
<p>Where I post updates about projects I'm doing.</p>
|
||||
<a href="https://blog.mgrove.uk" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="/comsci/" class="icon fa-laptop"><span class="label"></span></a>
|
||||
<h3>Computer Science</h3>
|
||||
</header>
|
||||
<p>Some helpful tips for studying Computer Science.</p>
|
||||
<a href="/comsci/" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="https://instagram.com/morganandmeganbichons" class="icon fa-paw"><span class="label"></span></a>
|
||||
<h3>Dogs</h3>
|
||||
</header>
|
||||
<p>An Instagram account for my dogs.</p>
|
||||
<a href="https://instagram.com/morganandmeganbichons" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="/luhn-algorithm/" class="icon fa-credit-card"><span class="label"></span></a>
|
||||
<h3>Luhn Algorithm</h3>
|
||||
</header>
|
||||
<p>A number validator with the Luhn algorithm.</p>
|
||||
<a href="/luhn-algorithm/" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="https://instagram.com/mgrove36.photos" class="icon fa-camera"><span class="label"></span></a>
|
||||
<h3>Photography Feed</h3>
|
||||
</header>
|
||||
<p>A place for me to post my snaps.</p>
|
||||
<a href="https://instagram.com/mgrove36.photos" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="https://youngreporter.mgrove.uk" class="icon fa-graduation-cap"><span class="label"></span></a>
|
||||
<h3>Reading School BBC Young Reporter</h3>
|
||||
</header>
|
||||
<p>A site for Reading School's year 8 students to post news articles they have written.</p>
|
||||
<a href="https://youngreporter.mgrove.uk" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="/site-theme/" class="icon fa-pencil-square-o"><span class="label"></span></a>
|
||||
<h3>Site Theme</h3>
|
||||
</header>
|
||||
<p>A list of all templated elements available in this site's theme.</p>
|
||||
<a href="/site-theme/" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section>
|
||||
<div class="content">
|
||||
<header>
|
||||
<a href="https://traqua.ml" class="icon fa-tint"><span class="label"></span></a>
|
||||
<h3>Traqua</h3>
|
||||
</header>
|
||||
<p>"An innovative, water-saving solution for the home." A small STEM project based around using Raspberry Pis to track and reduce household water usage.</p>
|
||||
<a href="https://traqua.ml" class="button small">See more</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<section>
|
||||
<h3>Matthew Grove</h3>
|
||||
<p>Software engineer & amateur photographer from Surrey, UK.</p>
|
||||
<p><a href="https://github.com/mgrove36/demo-code/tree/master/">View this page on GitHub.</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Other Links</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i class="icon fa-camera"> </i>Photography</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i class="icon fa-paw"> </i>Dogs</a></li>
|
||||
|
||||
<li><a href="mailto:me@mgrove.uk" target="_blank"><i class="icon fa-envelope"> </i>Email me</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Social Media</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github"> </i>GitHub</a></li>
|
||||
|
||||
<li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter"> </i>Twitter</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram"> </i>Instagram</a></li>
|
||||
|
||||
<li><a href="https://linkedin.com/in/mgrove36" target="_blank"><i class="icon fa-linkedin"> </i>LinkedIn</a></li>
|
||||
|
||||
<li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook"> </i>Facebook</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© Matthew Grove 2020.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/assets/js/cookies.js"></script>
|
||||
<script src="/assets/js/util.js"></script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,213 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Luhn Algorithm">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#c72a32">
|
||||
|
||||
<!-- page info -->
|
||||
<title>Luhn Algorithm | Matthew Grove</title>
|
||||
<meta name="description" content="A number validator with the Luhn algorithm.">
|
||||
<meta name="keywords" content="" />
|
||||
|
||||
<!-- stylesheets -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-2');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<script src="/assets/js/jquery.min.js"></script>
|
||||
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
|
||||
<a class="logo" href="/">Matthew Grove</a>
|
||||
<nav>
|
||||
<a href="#menu">Menu</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="menu">
|
||||
<ul class="links">
|
||||
<li><a href="/" class="">Home</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/young-reporter/" class="">BBC Young Reporter Article Generator</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blackthunder.gq" class="">Black Thunder</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blog.mgrove.uk" class="">Blog</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/comsci/" class="">Computer Science</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" class="">Dogs</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/luhn-algorithm/" class="current-page-link">Luhn Algorithm</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" class="">Photography Feed</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://youngreporter.mgrove.uk" class="">Reading School BBC Young Reporter</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/site-theme/" class="">Site Theme</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://traqua.ml" class="">Traqua</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Heading -->
|
||||
<div id="heading">
|
||||
<h1>Luhn Algorithm</h1>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<section id="main" class="wrapper">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<link href="style.css" rel="stylesheet" type="text/css" />
|
||||
|
||||
<script src="script.js" type="text/javascript"></script>
|
||||
|
||||
<h1 id="validate-your-number">Validate Your Number</h1>
|
||||
|
||||
<form onreset="$('#validation_message').html(null);">
|
||||
<div class="row gtr-uniform">
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="number" id="number-input-field" placeholder="Number" />
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><a href="javascript:checkNumber();" class="button primary icon fa-check-circle">Check</a></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p id="validation_message"></p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<section>
|
||||
<h3>Matthew Grove</h3>
|
||||
<p>Software engineer & amateur photographer from Surrey, UK.</p>
|
||||
<p><a href="https://github.com/mgrove36/demo-code/tree/master/luhn-algorithm/">View this page on GitHub.</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Other Links</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i class="icon fa-camera"> </i>Photography</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i class="icon fa-paw"> </i>Dogs</a></li>
|
||||
|
||||
<li><a href="mailto:me@mgrove.uk" target="_blank"><i class="icon fa-envelope"> </i>Email me</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Social Media</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github"> </i>GitHub</a></li>
|
||||
|
||||
<li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter"> </i>Twitter</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram"> </i>Instagram</a></li>
|
||||
|
||||
<li><a href="https://linkedin.com/in/mgrove36" target="_blank"><i class="icon fa-linkedin"> </i>LinkedIn</a></li>
|
||||
|
||||
<li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook"> </i>Facebook</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© Matthew Grove 2020.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/assets/js/cookies.js"></script>
|
||||
<script src="/assets/js/util.js"></script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,46 +0,0 @@
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
var handled = false;
|
||||
if (event.key === "Enter") {
|
||||
checkNumber();
|
||||
handled = true;
|
||||
} else {
|
||||
// if number in input field is being edited, remove previous number evaluation message
|
||||
$("#validation_message").html(null);
|
||||
}
|
||||
|
||||
if (handled) {
|
||||
// Suppress "double action" if event handled
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
$("input[type='reset']").addEventListener("keydown", function(event) {
|
||||
$("#validation_message").html(null);
|
||||
});
|
||||
|
||||
// function for validating number entered with Luhn algorithm
|
||||
function checkNumber() {
|
||||
// define input string and remove non-numerical characters
|
||||
var input = document.getElementsByTagName("input")[0].value.replace(/\D/g,'');;
|
||||
// check string isn't empty
|
||||
if (input) {
|
||||
// retrieve digits & reverse
|
||||
var digits = document.getElementsByTagName("input")[0].value.split("").reverse(), sum = 0;
|
||||
digits.forEach(function(currentDigit, index) {
|
||||
newDigit = Number(currentDigit);
|
||||
if (index % 2 == 1) {
|
||||
if ((newDigit *= 2) > 9) {
|
||||
newDigit -= 9;
|
||||
}
|
||||
}
|
||||
sum += newDigit;
|
||||
});
|
||||
|
||||
// displays evaluation message
|
||||
$("#validation_message").html(((sum % 10) == 0) ? "Number is valid" : "Number is invalid");
|
||||
}
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.mdc-text-field-helper-text {
|
||||
margin: 0;
|
||||
}
|
||||
@@ -1,675 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Site Theme">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#c72a32">
|
||||
|
||||
<!-- page info -->
|
||||
<title>Site Theme | Matthew Grove</title>
|
||||
<meta name="description" content="A list of all templated elements available in this site's theme.">
|
||||
<meta name="keywords" content="" />
|
||||
|
||||
<!-- stylesheets -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-2');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<script src="/assets/js/jquery.min.js"></script>
|
||||
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
|
||||
<a class="logo" href="/">Matthew Grove</a>
|
||||
<nav>
|
||||
<a href="#menu">Menu</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="menu">
|
||||
<ul class="links">
|
||||
<li><a href="/" class="">Home</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/young-reporter/" class="">BBC Young Reporter Article Generator</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blackthunder.gq" class="">Black Thunder</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blog.mgrove.uk" class="">Blog</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/comsci/" class="">Computer Science</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" class="">Dogs</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/luhn-algorithm/" class="">Luhn Algorithm</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" class="">Photography Feed</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://youngreporter.mgrove.uk" class="">Reading School BBC Young Reporter</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/site-theme/" class="current-page-link">Site Theme</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://traqua.ml" class="">Traqua</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Heading -->
|
||||
<div id="heading">
|
||||
<h1>Site Theme</h1>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<section id="main" class="wrapper">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<div class="row">
|
||||
<div class="col-6 col-12-medium">
|
||||
|
||||
<!-- Text -->
|
||||
<h3>Text</h3>
|
||||
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this
|
||||
is <em>emphasized</em>.
|
||||
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
|
||||
This is <u>underlined</u>, this is <code>code</code>, and this is a <a href="#">link</a>.</p>
|
||||
<h2>Heading Level 2</h2>
|
||||
<h3>Heading Level 3</h3>
|
||||
<h4>Heading Level 4</h4>
|
||||
<h5>Heading Level 5</h5>
|
||||
<h6>Heading Level 6</h6>
|
||||
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem
|
||||
non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed
|
||||
ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing.</p>
|
||||
|
||||
<!-- Lists -->
|
||||
<h3>Lists</h3>
|
||||
<div class="row">
|
||||
<div class="col-6 col-12-small">
|
||||
<h4>Unordered</h4>
|
||||
<ul>
|
||||
<li>Dolor pulvinar amet etiam.</li>
|
||||
<li>Sagittis adipiscing lorem eleifend.</li>
|
||||
<li>Felis enim feugiat viverra.</li>
|
||||
</ul>
|
||||
<h4>Alternate</h4>
|
||||
<ul class="alt">
|
||||
<li>Dolor pulvinar amet etiam.</li>
|
||||
<li>Sagittis adipiscing lorem eleifend.</li>
|
||||
<li>Felis enim feugiat viverra.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-6 col-12-small">
|
||||
<h4>Ordered</h4>
|
||||
<ol>
|
||||
<li>Dolor pulvinar sed etiam.</li>
|
||||
<li>Etiam vel lorem sed amet.</li>
|
||||
<li>Felis enim feugiat viverra.</li>
|
||||
<li>Dolor pulvinar magna etiam.</li>
|
||||
<li>Etiam vel felis at sed viverra.</li>
|
||||
<li>Felis enim feugiat amet dolore.</li>
|
||||
<li>Dolor pulvinar lorem etiam.</li>
|
||||
<li>Etiam vel felis at lorem amet.</li>
|
||||
<li>Felis enim feugiat viverra.</li>
|
||||
<li>Dolor pulvinar magna etiam.</li>
|
||||
<li>Etiam vel felis sed viverra.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
<h4>Definition</h4>
|
||||
<dl>
|
||||
<dt>Alpha</dt>
|
||||
<dd>
|
||||
<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum.
|
||||
Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
|
||||
Integer ac pellentesque praesent.</p>
|
||||
</dd>
|
||||
<dt>Beta</dt>
|
||||
<dd>
|
||||
<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum.
|
||||
Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
|
||||
Integer ac pellentesque praesent.</p>
|
||||
</dd>
|
||||
<dt>Gamma</dt>
|
||||
<dd>
|
||||
<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum.
|
||||
Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
|
||||
Integer ac pellentesque praesent.</p>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<!-- Icons -->
|
||||
<h3>Icons</h3>
|
||||
<ul class="icons">
|
||||
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
|
||||
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
|
||||
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
|
||||
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
|
||||
<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
|
||||
<li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
|
||||
<li><a href="#" class="icon fa-apple"><span class="label">Apple</span></a></li>
|
||||
<li><a href="#" class="icon fa-windows"><span class="label">Windows</span></a></li>
|
||||
<li><a href="#" class="icon fa-500px"><span class="label">500px</span></a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Actions -->
|
||||
<h3>Actions</h3>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary small">Small</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="col-3 col-12-small">
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary">Default</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-3 col-12-small">
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary small">Small</a></li>
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-3 col-12-small">
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary fit">Default</a></li>
|
||||
<li><a href="#" class="button fit">Default</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-3 col-12-small">
|
||||
<ul class="actions stacked">
|
||||
<li><a href="#" class="button primary small fit">Small</a></li>
|
||||
<li><a href="#" class="button small fit">Small</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Blockquote -->
|
||||
<h3>Blockquote</h3>
|
||||
<blockquote>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio
|
||||
porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet.
|
||||
Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra. Lorem ipsum
|
||||
dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis
|
||||
iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac sed amet praesent. Nunc
|
||||
lacinia ante nunc ac gravida.</blockquote>
|
||||
|
||||
<!-- Table -->
|
||||
<h3>Table</h3>
|
||||
<h4>Default</h4>
|
||||
<div class="table-wrapper">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alpha</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>10.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beta</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>20.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gamma</td>
|
||||
<td>Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>30.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Delta</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>40.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Epsilon</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>50.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zeta</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>60.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eta</td>
|
||||
<td>Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>70.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Theta</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>80.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>360.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
<h4>Alternate</h4>
|
||||
<div class="table-wrapper">
|
||||
<table class="alt">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
<th>Price</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Alpha</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>10.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Beta</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>20.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gamma</td>
|
||||
<td>Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>30.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Delta</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>40.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Epsilon</td>
|
||||
<td>Ante turpis integer aliquet porttitor.</td>
|
||||
<td>50.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Zeta</td>
|
||||
<td>Vis ac commodo adipiscing arcu aliquet.</td>
|
||||
<td>60.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eta</td>
|
||||
<td>Morbi faucibus arcu accumsan lorem.</td>
|
||||
<td>70.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Theta</td>
|
||||
<td>Vitae integer tempus condimentum.</td>
|
||||
<td>80.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td colspan="2"></td>
|
||||
<td>360.00</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="col-6 col-12-medium">
|
||||
|
||||
<!-- Buttons -->
|
||||
<h3>Buttons</h3>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary">Primary</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary large">Large</a></li>
|
||||
<li><a href="#" class="button">Default</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button small">Small</a></li>
|
||||
<li><a href="#" class="button wide">Wide</a></li>
|
||||
</ul>
|
||||
<ul class="actions fit">
|
||||
<li><a href="#" class="button primary fit">Fit</a></li>
|
||||
<li><a href="#" class="button fit">Fit</a></li>
|
||||
</ul>
|
||||
<ul class="actions fit">
|
||||
<li><a href="#" class="button primary fit small">Fit + Small</a></li>
|
||||
<li><a href="#" class="button fit small">Fit + Small</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><a href="#" class="button primary icon fa-search">Icon</a></li>
|
||||
<li><a href="#" class="button icon fa-download">Icon</a></li>
|
||||
</ul>
|
||||
<ul class="actions">
|
||||
<li><span class="button primary disabled">Primary</span></li>
|
||||
<li><span class="button disabled">Default</span></li>
|
||||
</ul>
|
||||
|
||||
<!-- Form -->
|
||||
<h3>Form</h3>
|
||||
<form method="post" action="#">
|
||||
<div class="row gtr-uniform">
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="text" name="name" id="name" value="" placeholder="Name" />
|
||||
</div>
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="email" name="email" id="email" value="" placeholder="Email" />
|
||||
</div>
|
||||
<!-- Break -->
|
||||
<div class="col-12">
|
||||
<select name="category" id="category">
|
||||
<option value="">- Select -</option>
|
||||
<option value="alpha">Option alpha</option>
|
||||
<option value="beta">Option beta</option>
|
||||
<option value="gamma">Option gamma</option>
|
||||
<option value="delta">Option delta</option>
|
||||
<option value="epsilon">Option epsilon</option>
|
||||
<option value="zeta">Option zeta</option>
|
||||
<option value="eta">Option eta</option>
|
||||
<option value="theta">Option theta</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Break -->
|
||||
<div class="col-4 col-12-small">
|
||||
<input type="radio" id="radio-alpha" name="radio" checked="" />
|
||||
<label for="radio-alpha">Radio alpha</label>
|
||||
</div>
|
||||
<div class="col-4 col-12-small">
|
||||
<input type="radio" id="radio-beta" name="radio" />
|
||||
<label for="radio-beta">Radio beta</label>
|
||||
</div>
|
||||
<div class="col-4 col-12-small">
|
||||
<input type="radio" id="radio-gamma" name="radio" />
|
||||
<label for="radio-gamma">Radio gamma</label>
|
||||
</div>
|
||||
<!-- Break -->
|
||||
<div class="col-6 col-12-small">
|
||||
<input type="checkbox" id="checkbox-alpha" name="checkbox" />
|
||||
<label for="checkbox-alpha">Checkbox alpha</label>
|
||||
</div>
|
||||
<div class="col-6 col-12-small">
|
||||
<input type="checkbox" id="checkbox-beta" name="checkbox" checked="" />
|
||||
<label for="checkbox-beta">Checkbox beta</label>
|
||||
</div>
|
||||
<!-- Break -->
|
||||
<div class="col-12">
|
||||
<textarea name="textarea" id="textarea" placeholder="Alpha beta gamma delta" rows="6"></textarea>
|
||||
</div>
|
||||
<!-- Break -->
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><input type="submit" value="Submit Form" class="primary" /></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Image -->
|
||||
<h3>Image</h3>
|
||||
<h4>Fit</h4>
|
||||
<span class="image fit"><img src="/images/pic01.jpg" alt="" /></span>
|
||||
<div class="box alt">
|
||||
<div class="row gtr-50 gtr-uniform">
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
<!-- Break -->
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
<!-- Break -->
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
<div class="col-4"><span class="image fit"><img src="/images/pic01.jpg" alt="" /></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<h4>Left & Right</h4>
|
||||
<p>
|
||||
<span class="image left"><img src="/images/pic02.jpg" alt="" /></span>
|
||||
Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget.
|
||||
tempus euismod. Magna et cursus lorem faucibus vestibulum. Blandit adipiscing eu
|
||||
felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque
|
||||
praesent tincidunt felis sagittis eget. tempus euismod tempus. Vestibulum ante ipsum
|
||||
primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac
|
||||
adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis
|
||||
sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.
|
||||
Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
|
||||
Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida lorem ipsum dolor
|
||||
sit amet dolor feugiat consequat.
|
||||
</p>
|
||||
<p>
|
||||
<span class="image right"><img src="/images/pic02.jpg" alt="" /></span>
|
||||
Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget.
|
||||
tempus euismod. Magna et cursus lorem faucibus vestibulum. Blandit adipiscing eu
|
||||
felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque
|
||||
praesent tincidunt felis sagittis eget. tempus euismod tempus. Vestibulum ante ipsum
|
||||
primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac
|
||||
adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis
|
||||
sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum.
|
||||
Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.
|
||||
Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida lorem ipsum dolor
|
||||
sit amet dolor feugiat consequat.
|
||||
</p>
|
||||
|
||||
<!-- Box -->
|
||||
<h3>Box</h3>
|
||||
<div class="box">
|
||||
<p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu
|
||||
felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque
|
||||
praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum
|
||||
primis in faucibus vestibulum. Blandit adipiscing eu ipsum primis in faucibus
|
||||
vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu
|
||||
faucibus lorem ipsum dolor sit amet nullam.</p>
|
||||
</div>
|
||||
|
||||
<!-- Preformatted Code -->
|
||||
<h3>Preformatted</h3>
|
||||
<pre><code>i = 0;
|
||||
|
||||
while (!deck.isInOrder()) {
|
||||
print 'Iteration ' + i;
|
||||
deck.shuffle();
|
||||
i++;
|
||||
}
|
||||
|
||||
print 'It took ' + i + ' iterations to sort the deck.';
|
||||
</code></pre>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<section class="cta wrapper">
|
||||
<div class="inner">
|
||||
<h2>Example Fancy Header</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section class="wrapper">
|
||||
<div class="inner">
|
||||
<header class="special">
|
||||
<h2>Example Header</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</header>
|
||||
<div class="testimonials">
|
||||
<section>
|
||||
<div class="content">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</blockquote>
|
||||
<div class="author">
|
||||
<div class="image">
|
||||
<img src="/images/pic01.jpg" alt="" />
|
||||
</div>
|
||||
<p class="credit">- <strong>Jane Doe</strong> <span>A director of something</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="content">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</blockquote>
|
||||
<div class="author">
|
||||
<div class="image">
|
||||
<img src="/images/pic03.jpg" alt="" />
|
||||
</div>
|
||||
<p class="credit">- <strong>John Doe</strong> <span>A person</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<div class="content">
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
||||
</blockquote>
|
||||
<div class="author">
|
||||
<div class="image">
|
||||
<img src="/images/pic02.jpg" alt="" />
|
||||
</div>
|
||||
<p class="credit">- <strong>Janet Smith</strong> <span>Someone important</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<section>
|
||||
<h3>Matthew Grove</h3>
|
||||
<p>Software engineer & amateur photographer from Surrey, UK.</p>
|
||||
<p><a href="https://github.com/mgrove36/demo-code/tree/master/site-theme/">View this page on GitHub.</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Other Links</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i class="icon fa-camera"> </i>Photography</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i class="icon fa-paw"> </i>Dogs</a></li>
|
||||
|
||||
<li><a href="mailto:me@mgrove.uk" target="_blank"><i class="icon fa-envelope"> </i>Email me</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Social Media</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github"> </i>GitHub</a></li>
|
||||
|
||||
<li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter"> </i>Twitter</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram"> </i>Instagram</a></li>
|
||||
|
||||
<li><a href="https://linkedin.com/in/mgrove36" target="_blank"><i class="icon fa-linkedin"> </i>LinkedIn</a></li>
|
||||
|
||||
<li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook"> </i>Facebook</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© Matthew Grove 2020.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/assets/js/cookies.js"></script>
|
||||
<script src="/assets/js/util.js"></script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<?xml version="1.0" encoding="URF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>/luhn-algorithm/</loc>
|
||||
<lastmod>2020-12-29</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>/site-theme/</loc>
|
||||
<lastmod>2020-12-29</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>/young-reporter/</loc>
|
||||
<lastmod>2020-12-29</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>/</loc>
|
||||
<lastmod>2020-12-29</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
|
||||
<url>
|
||||
<loc>/comsci/</loc>
|
||||
<lastmod>2020-12-29</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.5</priority>
|
||||
</url>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</urlset>
|
||||
@@ -1,449 +0,0 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Chrome on Android -->
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<link rel="icon" sizes="192x192" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- add to homescreen for Safari on iOS -->
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="BBC Young Reporter Article Generator">
|
||||
<link rel="apple-touch-icon-precomposed" href="https://mgrove.uk/logo.png">
|
||||
|
||||
<!-- tile icon & colour for Windows 8 -->
|
||||
<meta name="msapplication-TileImage" content="https://mgrove.uk/logo.png">
|
||||
<meta name="msapplication-TileColor" content="#c72a32">
|
||||
|
||||
<!-- page info -->
|
||||
<title>BBC Young Reporter Article Generator | Matthew Grove</title>
|
||||
<meta name="description" content="A tool to create markdown files from news articles and their metadata for uploading to the Reading School BBC Young Reporter website.">
|
||||
<meta name="keywords" content="" />
|
||||
|
||||
<!-- stylesheets -->
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
|
||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-124505000-1" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag() { dataLayer.push(arguments); }
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-124505000-2');
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<script src="/assets/js/jquery.min.js"></script>
|
||||
|
||||
<body class="is-preload">
|
||||
|
||||
<!-- Header -->
|
||||
<header id="header">
|
||||
<img src="https://mgrove.uk/logo-clear-square.png" class="logo" />
|
||||
<a class="logo" href="/">Matthew Grove</a>
|
||||
<nav>
|
||||
<a href="#menu">Menu</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Nav -->
|
||||
<nav id="menu">
|
||||
<ul class="links">
|
||||
<li><a href="/" class="">Home</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/young-reporter/" class="current-page-link">BBC Young Reporter Article Generator</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blackthunder.gq" class="">Black Thunder</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://blog.mgrove.uk" class="">Blog</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/comsci/" class="">Computer Science</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" class="">Dogs</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/luhn-algorithm/" class="">Luhn Algorithm</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" class="">Photography Feed</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://youngreporter.mgrove.uk" class="">Reading School BBC Young Reporter</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="/site-theme/" class="">Site Theme</a></li>
|
||||
|
||||
|
||||
|
||||
|
||||
<li><a href="https://traqua.ml" class="">Traqua</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div id="cookies">
|
||||
<p>Just to let you know, I use cookies on my site.</p>
|
||||
<p><a href="javascript:void(0);" id="close-cookies">OK</a></p>
|
||||
</div>
|
||||
|
||||
<!-- Heading -->
|
||||
<div id="heading">
|
||||
<h1>BBC Young Reporter Article Generator</h1>
|
||||
</div>
|
||||
|
||||
<!-- Main -->
|
||||
<section id="main" class="wrapper">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<h3 id="prerequisites">Prerequisites</h3>
|
||||
|
||||
<p>Before you begin, ensure you have, as a minimum:</p>
|
||||
<ul>
|
||||
<li>a headline,</li>
|
||||
<li>the name(s) of the author(s),</li>
|
||||
<li>a header image, which will be shown behind the headline (so the content of this image can’t be vital, like a graph),</li>
|
||||
<li>a caption for your header image,</li>
|
||||
<li>the copyright attribution for your header image,</li>
|
||||
<li>a brief description (one or two short sentences) of your article, and</li>
|
||||
<li>your article content.</li>
|
||||
</ul>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3 id="instructions">Instructions</h3>
|
||||
|
||||
<p>Fill in the fields below, and then click the <em>download</em> button to generate a file to be uploaded to Reading School’s BBC Young Reporter website.</p>
|
||||
|
||||
<p>Give the authors’ names in the format <code class="language-plaintext highlighter-rouge">First_Name Last_Initial</code>, and separate multiple authors with a comma - e.g. <code class="language-plaintext highlighter-rouge">John D, Emma S</code>.</p>
|
||||
|
||||
<ul>
|
||||
<li>If there are any headings inside your article, please place <code class="language-plaintext highlighter-rouge"># </code> in front of them.</li>
|
||||
<li>For subtitles, use <code class="language-plaintext highlighter-rouge">## </code>, as so on for smaller headings, up to and including <code class="language-plaintext highlighter-rouge">###### </code>.</li>
|
||||
<li>For bullet points, use <code class="language-plaintext highlighter-rouge">* </code>, and for indented bullets, increase the indent using the tab button on your keyboard.</li>
|
||||
<li>For numbered lists, use the numbers/letters: e.g. <code class="language-plaintext highlighter-rouge">1. </code>.</li>
|
||||
</ul>
|
||||
|
||||
<p>Note the requirement for spaces after each of the above items - for example:</p>
|
||||
|
||||
<pre><code>### My Heading
|
||||
|
||||
1. Numbered item
|
||||
* Indented bulleted item</code></pre>
|
||||
|
||||
<p>will produce:</p>
|
||||
|
||||
<blockquote>
|
||||
<h3>My Heading</h3>
|
||||
|
||||
<ol>
|
||||
<li>Numbered item</li>
|
||||
<ul>
|
||||
<li>Indented bulleted item</li>
|
||||
</ul>
|
||||
</ol>
|
||||
|
||||
</blockquote>
|
||||
|
||||
<p>Other formatting can be done with the following:</p>
|
||||
|
||||
<ul>
|
||||
<li>For italics, use <code class="language-plaintext highlighter-rouge">*my italic text*</code>.</li>
|
||||
<li>For bold, use <code class="language-plaintext highlighter-rouge">**my bold text**</code>.</li>
|
||||
<li>For bold and italics, use <code class="language-plaintext highlighter-rouge">***my bold, italic text***</code>.</li>
|
||||
<li>For links, use <code class="language-plaintext highlighter-rouge">[text to show in article](URL)</code>.</li>
|
||||
<li>To include an extra image (besides the cover image), use:</li>
|
||||
</ul>
|
||||
<dl>
|
||||
<dd>
|
||||
<pre><code>{% include image.html caption="IMAGE_CAPTION" copyright="IMAGE_COPYRIGHT" %}</code></pre>
|
||||
<p>Replace `IMAGE_CAPTION` with a caption for the image, and `IMAGE COPYRIGHT` with the copyright owner. E.g.:</p>
|
||||
<pre><code>{% include image.html caption="Test image caption" copyright="Reading School" %}</code></pre>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<ul>
|
||||
<li>To include a video, upload it to YouTube and then use:</li>
|
||||
</ul>
|
||||
<dl>
|
||||
<dd>
|
||||
<pre><code>{% include video.html id="VIDEO_ID" %}</code></pre>
|
||||
<p>Replace `VIDEO_ID` with the YouTube video ID (e.g. for <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">https://www.youtube.com/watch?v=dQw4w9WgXcQ</a>, the video ID is dQw4w9WgXcQ). An example:</p>
|
||||
<pre><code>{% include video.html id="dQw4w9WgXcQ" %}</code></pre>
|
||||
</dd>
|
||||
</dl>
|
||||
|
||||
<p>The cover image for your article must be a JPEG image, and have the <code class="language-plaintext highlighter-rouge">jpg</code> file extension. If your image is a PNG, you can <a href="https://png2jpg.com/">convert it using an online tool</a>. The file name must also be the same as your article’s file name. This will be provided to you when you download the file from this page. E.g. if the file you download from this page is <code class="language-plaintext highlighter-rouge">news-article.md</code> then your cover image must be <code class="language-plaintext highlighter-rouge">news-article.jpg</code> (capital letters <strong>DO</strong> matter).</p>
|
||||
|
||||
<p>Any extra images for your article must be in the format: <code class="language-plaintext highlighter-rouge">ARTICLE_FILE_NAME--extra-IMAGE_ID.jpg</code>, where you replace <code class="language-plaintext highlighter-rouge">ARTICLE_FILE_NAME</code> with the file name you used for the cover image, and <code class="language-plaintext highlighter-rouge">IMAGE_ID</code> with a unique ID for the image - start at 1 for the first image in your article (excluding the cover image). E.g.: <code class="language-plaintext highlighter-rouge">news-article--extra-1.jpg</code>.</p>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3 id="example">Example</h3>
|
||||
|
||||
<pre><code># Headline
|
||||
|
||||
## Heading2
|
||||
|
||||
### Heading3
|
||||
|
||||
#### Heading4
|
||||
|
||||
##### Heading5
|
||||
|
||||
###### Heading6
|
||||
|
||||
Some text.
|
||||
|
||||
1. Numbered item 1
|
||||
2. **Numbered item 2**
|
||||
* *Bullet 1*
|
||||
* Bullet 2
|
||||
1. Numbered item 3
|
||||
|
||||
***Bold & italics***
|
||||
|
||||
A link to [Google](https://google.com).</code></pre>
|
||||
|
||||
<p>Will produce:</p>
|
||||
|
||||
<blockquote>
|
||||
<h1>Headline</h1>
|
||||
|
||||
<h2>Heading2</h2>
|
||||
|
||||
<h3>Heading3</h3>
|
||||
|
||||
<h4>Heading4</h4>
|
||||
|
||||
<h5>Heading5</h5>
|
||||
|
||||
<h6>Heading6</h6>
|
||||
|
||||
<p>Some text.</p>
|
||||
|
||||
<ol>
|
||||
<li>Numbered item 1</li>
|
||||
<li><b>Numbered item 2</b></li>
|
||||
</ol>
|
||||
<ul>
|
||||
<li><i>Bullet 1</i></li>
|
||||
<li>Bullet 2</li>
|
||||
<ol>
|
||||
<li>Numbered item 3</li>
|
||||
</ol>
|
||||
</ul>
|
||||
|
||||
<p><b><i>Bold & italics</i></b></p>
|
||||
|
||||
A link to <a href="https://google.com">Google</a>.
|
||||
</blockquote>
|
||||
|
||||
<hr />
|
||||
|
||||
<h3 id="generator">Generator</h3>
|
||||
|
||||
<form onreset="if (!($('form a.submit').hasClass('disabled'))) $('form a.submit').addClass('disabled');">
|
||||
<div class="row gtr-uniform">
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="text" id="headline" placeholder="Headline" />
|
||||
</div>
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="text" id="authors" placeholder="Authors" />
|
||||
</div>
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="text" id="image-caption" placeholder="Image caption" />
|
||||
</div>
|
||||
<div class="col-6 col-12-xsmall">
|
||||
<input type="text" id="image-copyright" placeholder="Image copyright" />
|
||||
</div>
|
||||
<!-- Break -->
|
||||
<div class="col-12">
|
||||
<textarea id="article-description" placeholder="Article description" rows="2"></textarea>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<textarea id="article-content" placeholder="Article content" rows="20"></textarea>
|
||||
</div>
|
||||
<!-- Break -->
|
||||
<div class="col-12">
|
||||
<ul class="actions">
|
||||
<li><a href="javascript:downloadFile();" class="submit button primary icon fa-download">Download</a></li>
|
||||
<li><input type="reset" value="Reset" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function checkFieldStatuses() {
|
||||
var input_elements = $("form input[type='text']");
|
||||
var textarea_elements = $("form textarea");
|
||||
var elements = $.merge($("form input[type='text']"), $("form textarea"));
|
||||
any_empty = false;
|
||||
for (var i = 0, element; element = elements[i++];) {
|
||||
if (element.value === "") {
|
||||
any_empty = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (!any_empty && $("form a.submit").hasClass("disabled")) {
|
||||
$("form a.submit").removeClass("disabled");
|
||||
return "removed class";
|
||||
} else if (any_empty && !($("form a.submit").hasClass("disabled"))) {
|
||||
$("form a.submit").addClass("disabled");
|
||||
return "added class";
|
||||
}
|
||||
}
|
||||
|
||||
checkFieldStatuses();
|
||||
document.addEventListener("mouseup", function(event){
|
||||
checkFieldStatuses();
|
||||
}, true);
|
||||
$("form").keyup(function(event){
|
||||
checkFieldStatuses();
|
||||
});
|
||||
|
||||
function downloadFile(){
|
||||
var today = new Date();
|
||||
var dd = String(today.getDate()).padStart(2, '0');
|
||||
var mm = String(today.getMonth() + 1).padStart(2, '0');
|
||||
var yyyy = today.getFullYear();
|
||||
var hours = today.getHours();
|
||||
var minutes = today.getMinutes();
|
||||
var date = yyyy + "-" + mm + "-" + dd + " " + hours + ":" + minutes
|
||||
|
||||
var file_name = $("#headline")[0].value.replace(/[.,\/#!$%\^&\*;:{}=\-_`~()]/g,"").replace(/\s{2,}/g," ").replace(/\s+/g,"-").toLowerCase() + ".md";
|
||||
var text = `---
|
||||
title: '` + $("#headline")[0].value + `'
|
||||
date: ` + date + `
|
||||
authors: ` + $("#authors")[0].value + `
|
||||
image-caption: ` + $("#image-caption")[0].value + `
|
||||
copyright: ` + $("#image-copyright")[0].value + `
|
||||
description: ` + $("#article-description")[0].value + `
|
||||
---
|
||||
|
||||
` + $("#article-content")[0].value;
|
||||
|
||||
var element = document.createElement("a");
|
||||
element.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(text));
|
||||
element.setAttribute("download", file_name);
|
||||
|
||||
element.style.display = "none";
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.click();
|
||||
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
$("form input[type='text']").keypress(function(event) {
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
blockquote {
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="footer">
|
||||
<div class="inner">
|
||||
<div class="content">
|
||||
<section>
|
||||
<h3>Matthew Grove</h3>
|
||||
<p>Software engineer & amateur photographer from Surrey, UK.</p>
|
||||
<p><a href="https://github.com/mgrove36/demo-code/tree/master/young-reporter/">View this page on GitHub.</a></p>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Other Links</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36.photos" target="_blank"><i class="icon fa-camera"> </i>Photography</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/morganandmeganbichons" target="_blank"><i class="icon fa-paw"> </i>Dogs</a></li>
|
||||
|
||||
<li><a href="mailto:me@mgrove.uk" target="_blank"><i class="icon fa-envelope"> </i>Email me</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
<section>
|
||||
<h4>Social Media</h4>
|
||||
<ul class="plain">
|
||||
|
||||
<li><a href="https://github.com/mgrove36" target="_blank"><i class="icon fa-github"> </i>GitHub</a></li>
|
||||
|
||||
<li><a href="https://twitter.com/mgrove36" target="_blank"><i class="icon fa-twitter"> </i>Twitter</a></li>
|
||||
|
||||
<li><a href="https://instagram.com/mgrove36" target="_blank"><i class="icon fa-instagram"> </i>Instagram</a></li>
|
||||
|
||||
<li><a href="https://linkedin.com/in/mgrove36" target="_blank"><i class="icon fa-linkedin"> </i>LinkedIn</a></li>
|
||||
|
||||
<li><a href="https://facebook.com/mgrove36" target="_blank"><i class="icon fa-facebook"> </i>Facebook</a></li>
|
||||
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© Matthew Grove 2020.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="/assets/js/cookies.js"></script>
|
||||
<script src="/assets/js/util.js"></script>
|
||||
<script src="/assets/js/main.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
images/logo-bw.png
Normal file
BIN
images/logo-bw.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
images/logo-clear-square.png
Normal file
BIN
images/logo-clear-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
images/logo-clear.png
Normal file
BIN
images/logo-clear.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
BIN
images/logo-rounded-square.png
Normal file
BIN
images/logo-rounded-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 74 KiB |
BIN
images/logo-square.png
Normal file
BIN
images/logo-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
images/logo.png
Normal file
BIN
images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 83 KiB |
Reference in New Issue
Block a user