JavaScript - Acknowledgement Generator
Jump to navigation
Jump to search
About
NOTE: This page is a daughter page of: JavaScript
This follows on from JavaScript - Generating Image Boxes from a Text Area, but with more options etc.
Acknowledgement Slides Generator
ack-generator.html:
<!DOCTYPE html>
<html>
<head>
<title>Acknowledgement Slide Generator</title>
<link href='https://fonts.googleapis.com/css?family=Overpass' rel='stylesheet'>
<link href="ack-generator.css" rel="stylesheet">
<script src="ack-generator.js"></script>
<!---------------------- WORD HIGHLIGHTER INCLUDES START ---------------------->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="word-highlighter/jquery.highlight-within-textarea.js"></script>
<link rel="stylesheet" href="word-highlighter/highlight-within-textarea.css">
<!---------------------- WORD HIGHLIGHTER INCLUDES END ---------------------->
</head>
<body>
<!---------------------- BANNER START ---------------------->
<div id="div-banner">
<div id="div-banner-top">
<a href="ack-generator-examples.html" title="Click to see more examples">
<img src="images/ack-slide-example-2.png" align="right" class="slide-example-img" style="positon: absolute; top: 5px; right: 20px;" alt="Ack Gen Example">
</a>
<h1 class="title">Acknowledgement Slide Generator (go/ackgen)</h1>
<nav class="site-nav">
<div class="nav-item nav-current">
<a href="#">⌂ Generator</a>
</div>
<div class="nav-item">
<a href="ack-generator-addon.html">Slides Add-on</a>
</div>
<div class="nav-item">
<a href="ack-generator-examples.html">Memes and More</a>
</div>
</nav>
</div>
<div id="div-banner-bottom">
<div title="Don't forget all those internal tools and clenaup that made your success possible">Part of being Googley is to thank all the people who helped your project... but creating a good acknowlegement slide two minutes before your presentation is owie. We hope this tool helps!
</div>
</div>
</div>
<!---------------------- BANNER END ---------------------->
<div id="div-main-content">
<table border="0" width="100%">
<tr>
<td width="300px" valign="top">
<!-- INPUT AREA START =============================================== -->
<div class="process-step">(1) Enter all <a href="http://teams" target="_blank" title="Find usernames via go/teams">Googlers</a> who helped:</div>
<textarea rows="25" cols="50" id="txt-people" name="txt-people"
spellcheck="false"
onchange="SetRandomTextLockOn();"
title="One person per line... format is:
.......................................
PERSON: Name, username@, comment [,img_url]
..............< or: >.....................
NAME: First Last, username, comment
..............< or: >.....................
TEAM: Team Name
..............< also supported: >........
PERSON_LITTLE_PIC | PERSON_NO_PIC |
TEXT | LINK | IMAGE |
NEWLINE | HR">
# [TEAM|PERSON]:Name,username,comment,[img_url]
TEAM:Ack Gen
PERSON: Andrew, andrewnoske@, (code)
PERSON: Anna, another@, (review)
TEAM:Support
TEXT: Special thanks to hidden gnomes in change-stats-dev
NAME: Don, another@, (go/changestats)
</textarea>
<script id="rendered-js">
SetupTextAreaAsHighlightWithinTextarea();
</script>
<br>
<br>
<table border="0" width="100%">
<tr>
<td>style preset:</td>
<td>
<select id="cmb-style-name" onchange="GenerateAcks(); StyleChangeTips();">
<option value="master-moma-cards" selected>moma cards</option> <!-- 1. -->
<option value="master-big-moma">big moma</option> <!-- 2. -->
<option value="master-teams-round">teams round</option> <!-- 3. -->
<option value="master-teams-small">teams small</option> <!-- 4. -->
<option value="master-grey-boxes">grey boxes</option> <!-- 5. -->
<option value="master-silver">silver fox</option> <!-- 6. -->
<option value="master-midnight">midnight</option> <!-- 7. -->
<option value="master-plain">plain</option> <!-- 8. -->
<option value="master-orange-barf">orange barf</option> <!-- 9. -->
<option value="master-blue-barf">blue barf</option> <!-- 10. -->
<option value="master-red-barf">red barf</option> <!-- 11. -->
<option value="master-youtube-red">youtube red</option> <!-- 12. -->
<option value="master-corgi">corgi</option> <!-- 13. -->
<option value="master-kitty">kitty</option> <!-- 14. -->
<option value="master-goomics">goomics</option> <!-- 15. -->
<option value="master-burning-man">burning man</option> <!-- 16. -->
<option value="master-burning-cubby">burning cubby</option> <!-- 17. -->
<option value="master-custom">custom</option> <!-- 18. -->
</select>
</td>
</tr>
<tr>
<td>bg color:</td>
<td>
<datalist id="lst-colors">
<option value="white">
<option value="black">
<option value="navy">
<option value="grey">
<option value="linear-gradient(150deg, #adc5ff, #f0adff0)">
<option value="linear-gradient(180deg, rgba(230,145,0,1.0) 0%, rgba(161,101,11,1.0))">
<option value="#000">
<option value="#111">
<option value="#222">
<option value="#333">
<option value="#666">
<option value="#999">
<option value="#bbb">
<option value="#ddd">
<option value="#eee">
<option value="#fff">
<option value="#1967d2">
<option value="#1967d2">
<option value="#0277bdff">
<option value="url('images/backgrounds/background_corgi.jpg') no-repeat center center fixed">
<option value="url('images/backgrounds/background_kitty.jpg') no-repeat center center fixed">
<option value="url('images/backgrounds/background_goomics_book_faded.jpg')" >
<option value="linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.9) 100%), url('images/backgrounds/background_goomics_book.jpg')" >
<option value="url('images/backgrounds/background_google_front.jpg')" >
<option value="url('images/backgrounds/background_googleplex.jpg')" >
<option value="linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.9) 100%), url('images/backgrounds/background_googleplex.jpg')" >
</datalist>
<input type="text" id="txt-background-color" list="lst-colors"
value="" placeholder="slide bg color" size="35"
title="TIP: You'll probably want this to match the background of your slides. In the dropdown examples are gradients and playful background images. :)"
onchange="GenerateAcks();">
</td>
</tr>
<tr>
<td>
show:
</td>
<td style="font-size: 90%;">
<input type="checkbox" id="chk-names" name="chk-names" checked
onchange="GenerateAcks();">
<label for="chk-names">names</label> |
<input type="checkbox" id="chk-usernames" name="chk-usernames" checked
onchange="GenerateAcks();">
<label for="chk-usernames">usernames</label> |
<input type="checkbox" id="chk-comments" name="chk-comments" checked
onchange="GenerateAcks();">
<label for="chk-comments">comments</label>
</td>
</tr>
</table>
<br>
<br>
<div id="div-tips-area">
Feedback:
<br>
<textarea rows="6" cols="50" id="txt-feedback" spellcheck="false" readonly>
Change the text above!... try:
TEAM: Bumper Cars
PERSON: Andrew, anoske@, Crowdsourcing
PERSON_LITTLE_PIC: Jared, another@, Crowdsourcing
</textarea>
</div>
<br>
<br>
<br>
<br>
<div class="process-step">OR: (3) Try this <a href="http://go/ackgenslide" target="_blank" title="Find usernames via go/teams">slide addon</a> instead:</div>
<a href="http://go/ackgenslide" title="Click for the Slides Add-On">
<img src="images/wider_slide_ack_proposal_slide.png" class="slide-example-img-left"
alt="Slide Ack Generatore Proposal (slides)"
title="Slide Ack Generatore Proposal (slides)">
</a>
<a href="http://go/ackgenproposal" title="Click for the Slides Add-On">
<img src="images/google_slides_addon_acknowledges_slide_generator_1200x559.png" class="slide-example-img-left"
alt="Ack Gen Slides Addon (slides)"
title="Ack Gen Slides Addon (slides)">
</a>
<!-- INPUT AREA END ================================================= -->
</td>
<td valign="top" halighn="middle" width="100ox">
<!-- GENERATE BUTTON START =============================================== -->
<div class="process-step"> </div>
<button type="button" class="blue-button"
onclick="GenerateAcks();">
<span>Generate </span><br><br><img src="images/arrow-white.png" alt="Little arrow"></button>
<br>
<br>
<br>
<br>
<button type="button" class="blue-button little-button"
onclick="Randomize();"
title="Randomize output... cuz it's fun">
<span>Randomize </span></button>
<div id="randomize-area" class="randomize-area" display="none">
Lock:<br>
<input type="checkbox" id="chk-lock-text"
onchange="GenerateAcks();"><label for="chk-lock-text" title="Text content (names)">text</label> |
<input type="checkbox" id="chk-lock-style"
onchange="GenerateAcks();"><label for="chk-lock-style" title="Style preset">style</label> |
<input type="checkbox" id="chk-lock-bg"
onchange="GenerateAcks();"><label for="chk-lock-bg" title="Background">bg</label>
</div>
<br>
<br>
<button type="button" class="blue-button little-button"
onclick="DownloadProfileImages();"
title="Downloads just the profile pics">
Download Pics </button>
<!-- GENERATE BUTTON END ================================================= -->
</td>
<td valign="top">
<!-- OUTPUT AREA START =============================================== -->
<div class="process-step">(2) <a href="http://go/snipit" target="_blank" title="Download snipit extension then screenshot then 'Direct Link'">Screenshot</a> this into your Acknowledgements slide:</div>
<div id="div-master-area" class="resizable-content-area">
<div id="div-ack-area">
<!-- THIS IS WHERE GENERATED CONTENT GETS INSERTED -->
</div>
<div id="div-credit-area">Generated with go/ackgen</div>
</div>
<!-- OUTPUT AREA END ================================================= -->
</td>
</tr>
</table>
</div>
<script>
GenerateAcks();
</script>
</body>
</html>
ack-generator.js:
/**
* Sets up our 'txt-people' textarea with HighlightWithinTextarea properties.
*/
function SetupTextAreaAsHighlightWithinTextarea() {
$('textarea#txt-people').highlightWithinTextarea({
highlight: [
{highlight: 'TEAM:', className: 'darkblue'},
{highlight: 'PERSON:', className: 'blue'},
{highlight: 'PERSON_NO_PIC:', className: 'blue'},
{highlight: 'PERSON_LITTLE_PIC:', className: 'blue'},
{highlight: 'NAME:', className: 'blue'},
{highlight: 'TEXT:', className: 'blue'},
{highlight: 'LINK:', className: 'blue'},
{highlight: 'IMAGE:', className: 'blue'},
{highlight: 'NEWLINE', className: 'blue'},
{highlight: 'HR', className: 'blue'},
{highlight: /STYLE:.*/g, className: 'darkblue'},
{highlight: /#.*/g, className: 'comment'},
{highlight: /http[^,\n]*/g, className: 'url'},
{highlight: /images\/[^,\n]*/g, className: 'url'},
]
});
}
/**
* Sets the text lock checkbox for locking text on.
*/
function SetRandomTextLockOn() {
var chkLockText = document.getElementById('chk-lock-text');
chkLockText.checked = true;
}
/**
* Sets the background style of the given element.
* @param {!Element} element The HTML element to apply the background to.
* @param {string} backgroundStr String representing the background.
*/
function SetBackgroundFromString(element, backgroundStr) {
if (backgroundStr) {
if (backgroundStr.includes('gradient') || backgroundStr.includes('url')) {
element.style.background = backgroundStr;
} else {
element.style.backgroundColor = backgroundStr;
}
}
}
/**
* Takes a text piece, trims it and substitutes ";" for ",".
* @param {string} textIn Text string extracted from the textarea.
* @return {string} String after it is cleaned up.
*/
function GetTextPiece(textIn) {
return textIn.trim().replace(';', ',');
}
/**
* Generates acknowledgement images into the `div-ack-area` object.
*/
function GenerateAcks() {
// Get element references:
var txtPeople = document.getElementById('txt-people');
var txtFeedback = document.getElementById('txt-feedback');
var cmbStyleName = document.getElementById('cmb-style-name');
var txtBackgroundColor = document.getElementById('txt-background-color');
var chkNames = document.getElementById('chk-names');
var chkUsernames = document.getElementById('chk-usernames');
var chkComments = document.getElementById('chk-comments');
var divAckArea = document.getElementById('div-ack-area');
// Get values:
var masterDivClass = cmbStyleName.value;
var teamAreaClass = 'team-area';
var personAreaClass = 'person-area';
var nameAreaClass = 'name-area';
var backgroundColor = txtBackgroundColor.value;
var showNames = chkNames.checked;
var showUsernames = chkUsernames.checked;
var showComments = chkComments.checked;
// Clear generated area:
while (divAckArea.firstChild) {
divAckArea.removeChild(divAckArea.firstChild);
}
// Add master div:
var masterDiv = document.createElement('div');
masterDiv.setAttribute('class', masterDivClass);
SetBackgroundFromString(masterDiv, backgroundColor);
divAckArea.appendChild(masterDiv);
var currentDiv = masterDiv; // Points where we want to append next element.
// Split text apart:
var text = txtPeople.value;
var errorsArr = [];
var lines = text.split('\n');
// For each line:
for (var i = 0; i < lines.length; i++) {
var line = lines[i].trim();
if (line.startsWith('#')) { // Skip commented lines.
continue;
}
if (line == '') { // Treat empty lines as newlines.
line = 'NEWLINE:';
}
if (line.startsWith('NEWLINE') || // Special case for newlines / hr lines.
line.startsWith('HR')) {
line = line + ':';
}
if (line.indexOf(':') == -1) {
if (line.indexOf(',') == -1) {
line = line + ':';
} else {
line = 'PERSON:' + line; // Default to big pic.
}
}
// Take line (eg: "PERSON:Andrew,anoske@")
// and isolate:
// the itemType (eg: "PERSON")
// and properties (eg: ["Andrew", "anoske@"]).
var idxSplit = line.indexOf(':');
var itemType =
line.substr(0, idxSplit).trim(); // Item type should be at the front.
var itemPropertiesStr = line.substr(idxSplit + 1).trim();
var itemProperties = itemPropertiesStr.split(',');
var numPics = 0; // Tally number of pics (not including big ones).
// Add correct content for item type:
switch (itemType) {
case 'TEAM':
var title = '';
if (itemProperties.length >= 1 && itemProperties[0]) {
title = itemProperties[0].trim();
} else {
errorsArr.push('ERROR: Line ' + String(i) + ': No team name.');
}
var teamDivHeader = document.createElement('div');
teamDivHeader.setAttribute('class', 'team-header');
teamDivHeader.textContent = title;
var teamDiv = document.createElement('div');
teamDiv.setAttribute('class', teamAreaClass);
teamDiv.appendChild(teamDivHeader);
masterDiv.appendChild(teamDiv);
currentDiv = teamDiv;
break;
case 'PERSON':
case 'PERSON_LITTLE_PIC':
case 'PERSON_NO_PIC':
case 'NAME':
// Get property values:
var name = '';
var username = '';
var comment = '';
var imgSrcUrl = '';
if (itemProperties.length >= 1 && itemProperties[0]) {
name = itemProperties[0].trim();
} else {
errorsArr.push('ERROR: Line ' + String(i) + ': No person name!');
continue;
}
if (itemProperties.length >= 2) {
username = GetTextPiece(itemProperties[1]);
username = username.replace('@google.com', '');
if (username.endsWith('@')) {
username = username.replace('@', '');
}
}
if (itemProperties.length >= 3) {
comment = GetTextPiece(itemProperties[2]);
}
if (itemProperties.length >= 4) {
imgSrcUrl = itemProperties[3].trim();
}
// Derived properties:
var showPic = itemType == 'PERSON' || itemType == 'PERSON_LITTLE_PIC';
var nameClass = itemType == 'NAME';
var personDivUernameLink = document.createElement('a');
if (imgSrcUrl == '') {
imgSrcUrl =
'https://moma-teams-photos.corp.google.com/photos/' + username;
}
var personClass = nameClass ? nameAreaClass : personAreaClass;
// Create containing div for person:
var personDiv = document.createElement('div');
personDiv.setAttribute('class', personClass);
// Add picture:
if (showPic && imgSrcUrl != '') {
var personImg = document.createElement('img');
if (itemType == 'PERSON') {
personImg.setAttribute('class', 'person-big-pic');
} else if (itemType == 'PERSON_LITTLE_PIC') {
personImg.setAttribute('class', 'person-little-pic');
}
personImg.setAttribute('src', imgSrcUrl);
personDiv.appendChild(personImg);
}
// Add decoration:
if (itemType == 'PERSON') {
var decorationDiv = document.createElement('div');
var decorationClasses = 'decoration decoration-' + String(numPics);
decorationDiv.setAttribute('class', decorationClasses);
personDiv.appendChild(decorationDiv);
numPics += 1;
}
// Add name:
if (showNames && name != '') {
var personDivName = document.createElement('div');
personDivName.setAttribute('class', 'person-name');
personDivName.textContent = name;
personDiv.appendChild(personDivName);
}
// Add username:
if (showUsernames && username != '') {
var personDivUsername = document.createElement('div');
personDivUsername.setAttribute('class', 'person-username');
personDivUsername.setAttribute('title', 'Open in Moma');
var momaPageUrl = 'http://teams/' + username;
var usernameToDisplay = username;
if (!username.startsWith("(")) {
usernameToDisplay = username + '@';
}
personDivUernameLink.setAttribute('href', momaPageUrl);
personDivUernameLink.setAttribute('target', 'blank_');
personDivUernameLink.textContent = usernameToDisplay;
personDivUsername.appendChild(personDivUernameLink);
personDiv.appendChild(personDivUsername);
}
// Add comment:
if (showComments && comment != '') {
var personDivComment = document.createElement('div');
personDivComment.setAttribute('class', 'person-comment');
personDivComment.textContent = comment;
personDiv.appendChild(personDivComment);
}
// Add any extra, style specific properties:
for (var j = 4; j < itemProperties.length; j++) {
var extraSplit = itemProperties[j].split(':');
if (extraSplit.length == 2) {
var classPostfix = GetTextPiece(extraSplit[0]);
var extraText = GetTextPiece(extraSplit[1]);
var personDivExtra = document.createElement('div');
personDivExtra.setAttribute('class', 'person-' + classPostfix);
personDivExtra.textContent = extraText;
personDiv.appendChild(personDivExtra);
}
}
currentDiv.appendChild(personDiv);
break;
case 'NEWLINE':
var hrElement = document.createElement('br');
currentDiv.appendChild(hrElement);
break;
case 'STYLE':
// Add new master div:
masterDivClass = itemPropertiesStr;
if (!masterDivClass.startsWith('master')) {
masterDivClass = 'master-' + itemPropertiesStr;
}
var newMasterDiv = document.createElement('div');
newMasterDiv.setAttribute('class', masterDivClass);
SetBackgroundFromString(newMasterDiv, backgroundColor);
divAckArea.appendChild(newMasterDiv);
masterDiv = newMasterDiv;
currentDiv = newMasterDiv; // Points where we want to append next element.
break;
case 'HR':
var hrElement = document.createElement('hr');
currentDiv.appendChild(hrElement);
break;
case 'LINK':
var linkUrl = '';
var linkText = '';
if (itemProperties.length == 0) {
errorsArr.push('ERROR: Line ' + String(i) + ': No link.');
}
if (itemProperties.length >= 1) {
linkUrl = itemProperties[0];
linkText = linkUrl;
}
if (itemProperties.length >= 2) {
linkText = itemProperties[1];
}
var linkLink = document.createElement('a');
linkLink.textContent = linkText;
linkLink.setAttribute('href', linkUrl);
linkLink.setAttribute('target', 'blank_');
linkLink.setAttribute('title', 'Open in new window');
currentDiv.appendChild(linkLink);
break;
case 'IMAGE':
var imgUrl = '';
var width = '';
if (itemProperties.length == 0) {
errorsArr.push('ERROR: Line ' + String(i) + ': No image url.');
}
if (itemProperties.length >= 1) {
imgUrl = itemProperties[0];
}
if (itemProperties.length >= 2) {
width = itemProperties[1];
}
var linkLink = document.createElement('a');
linkLink.setAttribute('href', imgUrl);
linkLink.setAttribute('target', 'blank_');
linkLink.setAttribute('title', 'Open in new window');
var img = document.createElement('img');
img.setAttribute('src', imgUrl);
if (width != '') {
img.setAttribute('width', width);
}
linkLink.appendChild(img);
currentDiv.appendChild(linkLink);
break;
case 'TEXT':
var textText = '';
if (itemProperties.length >= 1) {
textText = itemPropertiesStr;
} else {
errorsArr.push('ERROR: Line ' + String(i) + ': No text.');
}
var textDiv = document.createElement('div');
textDiv.setAttribute('class', 'team-text');
textDiv.textContent = textText;
currentDiv.appendChild(textDiv);
break;
default:
errorsArr.push('ERROR: Not recognized \'' + itemType + '\'');
}
}
// Update feedback area with text:
if (errorsArr.length == 0) {
txtFeedback.value = 'No errors!';
txtFeedback.style.color = '#999';
} else {
txtFeedback.value = errorsArr.join('\n');
txtFeedback.style.color = 'red';
}
}
/**
* Playful commentary depending on what you pick for `cmb-style-name`.
*/
function StyleChangeTips() {
// Get element references:
var cmbStyleName = document.getElementById('cmb-style-name');
var txtFeedback = document.getElementById('txt-feedback');
// If errors shown, don't mess with it.
if (txtFeedback.style.color == 'red') {
return;
}
// Add playful comment:
var masterDivClass = cmbStyleName.value;
switch (masterDivClass) {
case 'master-moma-cards':
txtFeedback.value = 'Modelled on CS used on Moma pages.';
break;
case 'master-teams-round':
txtFeedback.value = 'Similar to what you see on teams pages (go/teams).';
break;
case 'master-teams-small':
txtFeedback.value =
'Similar to what you see on teams search pages (go/teams) with little rows of results. Look at the tiny little people.';
break;
case 'master-midnight':
txtFeedback.value = 'For people who like dark slides.';
break;
case 'master-plain':
txtFeedback.value = 'Nice and boring for you.';
break;
case 'master-orange-barf':
txtFeedback.value =
'Some people really love orange\n\nYou probably like kangaroos? Oh wait, they are brown.';
break;
case 'master-grey-boxes':
txtFeedback.value = 'Nice and reliable';
break;
case 'master-silver':
txtFeedback.value =
'I modelled this off a g3doc template I used at go/gpsteammembers. I used to modify and take screenshots of this page before I decided there is an easier way than editing code.';
break;
case 'master-custom':
txtFeedback.value =
'We don\'t support entering in custom CSS directly, but if you go to Chrome > View > Developer > Developer Tools > Elements and click on any element, you can play with the CSS values that appear.\n\nMore hardcore? Copy ack-generator.css and modify it that way then send me anything new/different cool you come up with: anoske@google.com (feedback encouraged!).';
txtFeedback.style.color = '#ff0000';
return;
}
txtFeedback.style.color = '#999';
}
/**
* Randomly chooses the name of a style, matching the 'cmb-style-name' dropdown values.
* Notice that some styles have (deliberately) been given a greater weight that others.
* @return {string} Style name (eg: "master-teams-round").
*/
function GetRandomStyle() {
var randStyleIdx = Math.floor(Math.random() * 23);
var newStyle = 'white';
switch (randStyleIdx) {
case 0:
case 1:
case 2:
case 3:
case 4: newStyle = 'master-moma-cards'; break; // 1.
case 5:
case 6: newStyle = 'master-big-moma'; break; // 2.
case 7:
case 8: newStyle = 'master-teams-round'; break; // 3.
case 9: newStyle = 'master-teams-small'; break; // 4.
case 10: newStyle = 'master-grey-boxes'; break; // 5.
case 11: newStyle = 'master-silver'; break; // 6.
case 12: newStyle = 'master-midnight'; break; // 7.
case 13: newStyle = 'master-plain'; break; // 8.
case 14: newStyle = 'master-orange-barf'; break; // 9.
case 15: newStyle = 'master-blue-barf'; break; // 10.
case 16: newStyle = 'master-red-barf'; break; // 11.
case 17: newStyle = 'master-youtube-red'; break; // 12.
case 18: newStyle = 'master-corgi'; break; // 13.
case 19: newStyle = 'master-kitty'; break; // 14.
case 20: newStyle = 'master-goomics'; break; // 15.
case 21: newStyle = 'master-burning-man'; break; // 16.
case 22: newStyle = 'master-burning-cubby'; break; // 17.
case 23: newStyle = 'master-goomics'; break; // 18. Don't pick this one.
default: newStyle = 'master-moma-cards'; break; // Default.
}
return newStyle;
}
/**
* @type {!Array<string>} Array of background strings to randmoly pick from.
*/
var BACKGROUND_STRINGS = [
// Greyscale:
'white',
'black',
'grey',
'#333',
'#ddd',
'#eee',
// Blues:
'#ccccff',
'#1967d2',
'#1967d2',
'#0277bd',
// Other colors:
'#95e8ab', // Light green.
// Greyscale gradients:
'linear-gradient(90deg, #eee, #fff)',
'linear-gradient(0deg, #e3e3e3, #f3f3f3)',
// Color gradients:
'linear-gradient(150deg, #adc5ff, #f0adff)', // Blue to purple,
'linear-gradient(180deg, rgba(230,145,0,1.0) 0%, rgba(161,101,11,1.0))',
'background: linear-gradient(180deg, rgba(77,170,232,1) 0%, rgba(77,170,232,1) 75%, rgba(36,134,199,1) 100%);', // Orange.
// Image backgrounds:
'url("images/backgrounds/background_corgi.jpg")', // Multiple corgis.
'url("images/backgrounds/background_corgi.jpg")',
'url("images/backgrounds/background_corgi.jpg") no-repeat center center fixed',
'url("images/backgrounds/background_kitty.jpg")', // Multiple kitty.
'url("images/backgrounds/background_kitty.jpg") no-repeat center center',
'url("images/backgrounds/background_kitty.jpg") no-repeat center center',
'url("images/backgrounds/background_goomics_book_faded.jpg")',
'url("images/backgrounds/background_goomics_book.jpg")',
'url("images/backgrounds/background_google_front.jpg")',
// Image backgrounds of Google:
'linear-gradient(to bottom, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 100%), url("images/backgrounds/background_google_front.jpg")',
'url("images/backgrounds/background_googleplex.jpg")',
'linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.9) 100%), url("images/backgrounds/background_googleplex.jpg")',
'linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.9) 100%), url("images/backgrounds/background_women_at_google.jpg")'
];
/**
* Randomly chooses a new background (color/gradient/image) from 'BACKGROUND_STRINGS'.
* @param {string} chosenStyleName Style name matching matching the 'cmb-style-name'
* dropdown values. Certain styles will bias the choice of a complimentary background.
* @return {string} Background string (eg: "linear-gradient(0deg, #e3e3e3, #f3f3f3)").
*/
function GetRandomBackgroundString(chosenStyleName) {
var randBgIdx = Math.floor(Math.random() * BACKGROUND_STRINGS.length);
var newBackground = BACKGROUND_STRINGS[randBgIdx];
// Flip a coin for certain background styles which have a matching background.
var coinFlip = Math.floor(Math.random() * 2);
if (coinFlip == 1) {
switch (chosenStyleName) {
case 'master-corgi':
newBackground = 'url("images/backgrounds/background_corgi.jpg")';
break;
case 'master-kitty':
newBackground = 'url("images/backgrounds/background_kitty.jpg")';
break;
case 'master-goomics':
newBackground = 'url("images/backgrounds/background_goomics_book.jpg")';
break;
case 'buring-man':
newBackground = 'white';
break;
default:
}
}
return newBackground;
}
/**
* @type {!Array<string>} Array of titles which match to text examples.
*/
var TEXT_EXAMPLE_TITLES = [
'default', // 0.
'menu-photos', // 1.
'stay-thirsty', // 2.
'cleanup-challenge', // 3.
'women-at-google', // 4.
'ex-girlfriends', // 5.
'monty-python', // 6.
'australian-animals', // 7.
'jeff-dean-style', // 8.
'burning-man', // 9.
];
/**
* Randomly chooses a the title of a text example from 'TEXT_EXAMPLE_TITLES'.
* @param {boolean} skipDefault If true, skips default example.
* @return {string} The title of an acknowledgement text example.
*/
function GetRandomTextExample(skipDefault) {
var randExampleIdx = Math.floor(Math.random() * TEXT_EXAMPLE_TITLES.length);
if (skipDefault && randExampleIdx == 'default') {
randExampleIdx = 'women-at-google';
}
return TEXT_EXAMPLE_TITLES[randExampleIdx];
}
/**
* Returns the matching example text.
* @param {string} textExampleTitle The title of a text example matching 'TEXT_EXAMPLE_TITLES'.
* @return {string} The example text.
*/
function GetTextExampleText(textExampleTitle) {
switch (textExampleTitle) {
case 'default': // 0.
return `# [TEAM|PERSON]:Name,username,comment,[img_url]
TEAM:Ack Gen
PERSON: Andrew, anoske@, (code)
PERSON: Anna, another@, (review), images/people/googlers/another.jpg
TEAM:Support
TEXT: Special thanks to hidden gnomes in change-stats-dev
# FROM:
# go/googlerstats, owned by anoske@ ....
`;
case 'menu-photos': // 1.
return `# ============
TEAM:Menu / Dishes (NY)
PERSON:Ronnie,another@,ex menu lead,images/people/googlers/rfalcon.jpg
PERSON: David, another@, (dishes lead)
NAME: Seth, another@, (dishes)
NAME: Isha, another@, (happy hour)
# ============
TEAM:Beehive (Classification)
PERSON: Chunglin, another@, (now dishes)
PERSON: Benjamin, another@, (beehive)
NAME: Steve, another@, (PM)
TEAM:India Ingest
PERSON: Amarnath, another@, (catalog eng)
PERSON: Min, another@, (PM)
# ============
TEAM:Lens (OCR on Menus)
PERSON: Prakhar, another@, (using ocr)
PERSON: Vanessa, another@, (lead)
# ============
TEAM:Catalog
PERSON: Guangchun, another@, (collections)
PERSON: Rashk, another@, (lead)
NAME: Tianyu, another@ (catalog)
# ============
TEAM:Geo Photo Ranking
PERSON: Amit, another@, (ranking lead)
PERSON: Sema, another@,(colabs)
NAME: Mona
NAME: Jared
NAME: Ye
NAME: Silvian
# ============
`;
case 'stay-thirsty': // 2.
return `# ============
# go/ackgenerator:
PERSON: Goldsmith, staythirsty@,, https://screenshot.googleplex.com/Kwn6LYcb5u2.png
PERSON: Larry, another@
PERSON: Sundar, another@
PERSON: Sergey, another@
`;
case 'cleanup-challenge': // 3.
return `TEAM:Cleanup Challenge
TEXT: ABOUT: go/cleanupchallenge was the most proud thing I've ever done at Google. It started as us picking up 700 pounds of litter around Google; but we had weekly meetings to try changing google internal culture around litter and recyclying. We failed in most of our attempted effots; but we took pride in the little victories.
PERSON: Andrew Noske, anoske@, Garbage Vision Guy, images/people/cleanup-challenge/andrew_noske.png
PERSON: Jeff Carloni, another@, Recycling Manager, images/people/cleanup-challenge/jeff_carloni.png
PERSON: Rose Puntillo, another@, Administrative Business Partner, images/people/cleanup-challenge/rose_puntillo.jpg
PERSON: Carolyn Knight, another@, Media and Nature Enthusiast, images/people/cleanup-challenge/carolyn_knight.jpg
HR
PERSON: Shahrnoosh Ansari, another@, Googler Engagement, images/people/cleanup-challenge/shahrnoosh_ansari.jpg
PERSON: Mayumi Whitworth, another, Administration, images/people/cleanup-challenge/mayumi_whitworth.png
PERSON: Mario Tapia Tapia, another@, Maps Engineer / Serious Collector, images/people/cleanup-challenge/mario_tapia_tapia.png
PERSON: Lyubov Shyshova, another@, Former Entertainment Manager, images/people/cleanup-challenge/lyubov_shyshova.png
HR
PERSON: Deep Joshi, another@, GIS Specialist, images/people/cleanup-challenge/deep_joshi.jpg
PERSON: Rebecca Wall, another@, Reception Team Manager, images/people/cleanup-challenge/rebecca_wall.png
PERSON: Jenn Shemirani, another@, Former Logistics Manager, images/people/cleanup-challenge/jenn_shemirani.png
PERSON: Jill North, another@, Trekker and Games, images/people/cleanup-challenge/jill_north.png
`;
case 'women-at-google': // 4.
return `TEAM: Women@Google
TEXT: This is the Women@Google Global Org Chart 2019. Inspiration from two places:
LINK: http://go/goomicswomenatgoogle, Manu's "Women in Tech" (goomics episode)
LINK: https://sites.google.com/corp/google.com/women-hub/whos-who, Women Hub (who's who slide)
HR
TEAM: Advisory Group
PERSON: Ana Corrales, another@, VP Hardware
PERSON: Bonita Stewart, another@, VP Global Partnerships
PERSON: Eileen Naughton, another@, VP POps
PERSON: Jen Fitzpatrick, another@, VP Geo
PERSON: Kristen Gil, another@, VP BizOps
PERSON: Lorraine Twohill, another@, SVP Marketing, images/people/googlers/another.jpg
PERSON: Melonie Parker, another@, CDO & EE
PERSON: Ruth Porat, another@, SVP; CFO
PERSON: Susan Wojcicki, another@, SVP; CEO YouTube
TEAM: Global Pillar Leads
PERSON: Elizabeth Reid, another@, VP Engineering; Geo
PERSON: Julie Eddleman, another@, Dir GBO
PERSON: Elissa Murphy, another@, VP Eng, images/people/googlers/another.jpg
PERSON: Halimah DeLaine Prado, another@, VP Legal
PERSON: Maggie Johnson, another@, VP Eng Edu
PERSON: Kristell Schuber, another@, Dir Marketing
TEAM: Global Pillar Leads
PERSON: Sowmya Subramanian, another@, Dir YouTube Eng (N America)
PERSON: Suzie Reider, another@, Dir Waze (N America), images/people/googlers/another.jpg
PERSON: Camila Matsubara, another@, Eng (LATAM)
PERSON: Susana Ayarza, another@, Dir Marketing (LATAM), images/people/googlers/another.jpg
PERSON: Alejandra Estanislao, another@, Eng (EMEA), images/people/googlers/another.jpg
PERSON: Paola Scarpa, another@, Dir GBO (EMEA)
PERSON: Madhuri Duggirala, another@, Dir gTech (APAC)
TEAM: Diversity, Equity & Inclusion Team
PERSON: Valeisha Butterfield-Jones, another@, Global Head of Inclusion
PERSON: Elise Birkhofer, another@, Global Lead Women's Community & Programs, images/people/googlers/birkhofer.jpg
PERSON: Sofia Sharkova, another@, EMEA Community Advisor
PERSON: Jo Terasawa, another@, APAC Community Advisor
`;
case 'ex-girlfriends': // 5.
return `TEAM: Favorite Ex-Girlfriends
TEXT: ABOUT: This is toungue-in-cheek acknowledgement slide for celebrities.
PERSON: Beyonce, b-knowles@, I'm still Crazy in Love with her., images/people/celebs/beyonce_knowles.jpg
PERSON: Emma, e-stones@, She said I was Superbad at relationships., images/people/celebs/emma_stone.jpg
PERSON: Jennifer, j-aniston@, In the end we just became Friends., images/people/celebs/jennifer_aniston.jpg
PERSON: Lawrence, j-lawrence@, She said she didn't like Passengers., images/people/celebs/jennifer_lawrence.jpg
PERSON: Jessica, alba@, Was my Honey for a while, images/people/celebs/jessica_alba.jpg
PERSON: Kristen, k-bells@, We tried a Couples Retreat; but she wasn't in a Good Place., images/people/celebs/kristen_bell.jpg
PERSON: Natalie, portman@, Where the Heart Is., images/people/celebs/natalie_portman.jpg
`;
case 'monty-python': // 6.
return `TEAM:Monty Python
TEXT: ABOUT: I though it would be fun to show some black-and-white pics. Classics. Just like Monty Python. If there guys wrote code you'd smile everytime you read the code comments... so here's encouraging you to be a little silly in your code to keep the rest of us sane.
PERSON: Eric Idle, , There's nothing wrong with you that an expensive operation can't prolong., images/people/monty-python/eric_idle.png
PERSON: Graham Chapman, , I can't talk to a man who bears an undeserved animosity towards ferrets, images/people/monty-python/graham_chapman.png
PERSON: John Cleese, , And now for something comletely different, images/people/monty-python/john_cleese.png
PERSON: Michael Palin, , There's no more work. We're destitute. I'm afraid I have no choice but to sell you all for scientific experiments., images/people/monty-python/michael_palin.png
PERSON: Terry Gilliam, , I've given up asking questions. l merely float on a tsunami of acceptance of anything life throws at me ... and marvel stupidly., images/people/monty-python/terry_gilliam.png
PERSON: Terry Jones, , He's not the Messiah - he's a very naughty boy!, images/people/monty-python/terry_jones.png
`;
case 'australian-animals': // 7.
return `TEXT: Not every animal in Australia is trying to kill you... here's some that are not. They are adorable! :)
LINK: http://dawdlez.com/2015/11/20/adorable-animals-from-australia/,Adorable Animals from Australia
PERSON: Western Pygmy Possum, ,, images/people/australian-animals/western-pygmy-possum.jpg
PERSON: Quokka, ,, images/people/australian-animals/quokka.jpg
PERSON: Bilby, ,, images/people/australian-animals/bilby.jpg
PERSON: Dingo, ,, images/people/australian-animals/dingo.jpg
PERSON: Echidna, ,, images/people/australian-animals/echidna.jpg
PERSON: Frilled Neck Lizard, ,, images/people/australian-animals/frilled-neck-lizard.jpg
PERSON: Koala, ,, images/people/australian-animals/koala.jpg
PERSON: Kookaburra, ,, images/people/australian-animals/kookaburra.jpg
PERSON: Playpus, ,, images/people/australian-animals/playpus.jpg
PERSON: Sugar Glider, ,, images/people/australian-animals/sugar-glider.jpg
PERSON: Tree Kangaroo, ,, images/people/australian-animals/tree-kangaroo.jpg
PERSON: Wombat, ,, images/people/australian-animals/wombat.jpg
`;
case 'jeff-dean-style': // 8.
return `TEAM: STYLE PREVIEW (brought to you by Jeff).
TEXT: If you don't know about the lengendary Jeff Dean you are probably a noogler. This go/ackgen example shows all styles available, and some sweet Jeff Dean facts from:
LINK: http://go/jeffdean, go/jeffdean
TEXT: To not acknowledge Jeff would be a sin.
STYLE: moma-cards
HR
TEAM: STYLE: moma-cards
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 1: Jeff Dean once bit a spider, the spider got super powers and C readability.
STYLE: big-moma
HR
TEAM: STYLE: big-moma
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 2: Jeff Dean has a MOMA badge for being Jeff Dean. [TRUE]
STYLE: teams-round
HR
TEAM: STYLE: teams-round
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 3: Jeff Dean has a MOMA badge for being Jeff Dean. [TRUE]
STYLE: teams-small
HR
TEAM: STYLE: teams-small
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 4: Two Turing Award winners report to Jeff Dean. [TRUE]
STYLE: grey-boxes
HR
TEAM: STYLE: grey-boxes
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 5: Google Search was Jeff Dean's Noogler Project.
STYLE: silver
HR
TEAM: STYLE: silver
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 6: Jeff Dean has binary readability.
STYLE: midnight
HR
TEAM: STYLE: midnight
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 7: Jeff Dean's PIN is the last 4 digits of pi.
STYLE: plain
HR
TEAM: STYLE: plain
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 8: TensorFlow is really just an API to Jeff Dean.
STYLE: orange-barf
HR
TEAM: STYLE: orange-barf
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 9: 70% of Googlers experience imposter syndrome. Jeff Dean is the other 30%.
STYLE: blue-barf
HR
TEAM: STYLE: blue-barf
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 10: Jeff Dean got promoted to level 11 in a system where max level is 10. [TRUE]
STYLE: red-barf
HR
TEAM: STYLE: red-barf
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 11: To Jeff Dean, "NP" means "No Problemo".
STYLE: youtube-red
HR
TEAM: STYLE: youtube-red
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 12: Jeff's keyboard doesn't have a backspace key.
STYLE: corgi
HR
TEAM: STYLE: corgi
PERSON: Jeff Dean, another@, corgi power
TEXT: Fact 13: When Jeff gives a seminar at Stanford, it's so crowded Don Knuth has to sit on the floor. (TRUE)
STYLE: kitty
HR
TEAM: STYLE: kitty
PERSON: Jeff Dean, another@, hello kitty
TEXT: Fact 14: Jeff Dean doesn't g4 sync. He just rewrites the code. It's faster.
STYLE: goomics
HR
TEAM: STYLE: goomics
PERSON: Jeff Dean, another@, superman?!
TEXT: Fact 15: Jeff Dean's resume lists the things he hasn't done; it's shorter that way.
STYLE: burning-man
HR
TEAM: STYLE: burning-man
PERSON: Jeff Dean, Batman, Code; code; code, images/people/burning-man/jeff_dean.jpg, location:San Francisco, status:every burn
TEXT: Fact 16: Jeff Dean wrote a PDD so private that even he couldn't read it.
STYLE: burning-cubby
HR
TEAM: STYLE: burning-cubby
PERSON: Jeff Dean, Batman, , images/people/burning-man/jeff_dean.jpg, location:San Francisco, status:every burn
TEXT: Fact 17: Jeff Dean can checkmate you in zero moves.
STYLE: custom
HR
TEAM: STYLE: custom
PERSON: Jeff Dean, another@, (superman)
TEXT: Fact 18: Jeff Dean was first professionally employed as a software engineer at the tender age of 14. (TRUE)
HR
TEXT: We don't support entering in custom CSS directly, but if you go to Chrome > View > Developer > Developer Tools > Elements and click on any element, you can play with the CSS values that appear.
TEXT: More hardcore? Copy ack-generator.css and modify it that way then send me anything new/different cool you come up with: anoske@google.com (feedback encouraged!)
`;
case 'burning-man': // 9.
return `STYLE: burning-man
TEXT: I used this "burning man" template for a special burning man project for my camp in 2019. Read about it here:
LINK: http://andrewnoske.com/wiki/Burning_man_-_MyFace_project, The MyFace Project (a social wall)
TEXT: Here's what it looked like:
IMAGE: images/backgrounds/burning_man_myface.jpg, 700px
PERSON: Andrew, (Dancing Owl), Dancing; projects; freedom, images/people/burning-man/andrew_noske.jpg, location:San Francisco; Australian, status:1 burns - early
PERSON: Jeff, (Inferno), #vanlife, images/people/burning-man/jeff_carloni.jpg, location:Morgan Hill; USA, status:4 burns - early
HR
STYLE: burning-cubby
TEXT: Since we already had people's pics we also decide to print photos for people's meal cubbies (since our camp; WrongTown; had a nice meal plan).
PERSON: Andrew, (Dancing Owl),, images/people/burning-man/andrew_noske.jpg, location:San Francisco; Australian, status:1 burns - early
PERSON: Jeff, (Inferno),, images/people/burning-man/jeff_carloni.jpg, location:Morgan Hill; USA, status:4 burns - early
`;
default:
return '# ERROR OCCURRED... not reccognized: ' + textExampleTitle;
}
}
/**
* Randomly changes the example text / background etc.
*/
function Randomize() {
// Get element references:
var txtFeedback = document.getElementById('txt-feedback');
var cmbStyleName = document.getElementById('cmb-style-name');
var txtBackgroundColor = document.getElementById('txt-background-color');
var chkLockText = document.getElementById('chk-lock-text');
var chkLockStyle = document.getElementById('chk-lock-style');
var chkLockBg = document.getElementById('chk-lock-bg');
// Get values:
var randomizeText = !chkLockText.checked;
var randomizeStyle = !chkLockStyle.checked;
var randomizeBg = !chkLockBg.checked;
var newFeedback = 'Madness!';
var styleName = cmbStyleName.value;
// Randomize text:
if (randomizeText) {
// var randExampleId = Math.floor(Math.random() * 9);
// var newText = '';
var textExampleTitle = GetRandomTextExample();
var newText = GetTextExampleText(textExampleTitle);
switch (textExampleTitle) {
case 'default': // 0.
newFeedback =
'The people who have helped with go/ack-gen and go/changestats';
break;
case 'menu-photos': // 1.
newFeedback =
'This is what a project might look like if it has multiple teams';
break;
case 'stay-thirsty': // 2.
newFeedback =
'Stay thirsty my friends (the most interesting man in the world)';
break;
case 'cleanup-challenge': // 3.
newFeedback =
'Best thing I ever did at Google. 20%s are not as supported these days, but if you want to do something you are proud of, it fills the soul. Good for your career? Probably not. Try it anyway.';
break;
case 'women-at-google': // 4.
newFeedback = 'This was mostly inspired by the "Women in Tech" poster by Manu. See: http://go/goomicswomenatgoogle.';
break;
case 'ex-girlfriends': // 5.
newFeedback =
'Should you acknowlege ex-girlfriends? Only for comedy purposes... not so good at a wedding.';
break;
case 'monty-python': // 6.
newFeedback = 'And now for something slightly completely different.';
break;
case 'australian-animals': // 7.
newFeedback = 'Not all Australian animals are trying to kill you.';
break;
case 'jeff-dean-style': // 8.
newFeedback = 'Two birds one stone? This demonstrates all the different styles *AND* pays hommage to Google\'s greatest employee. What else do you want? :)';
break;
case 'burning-man': // 9.
newFeedback = 'Yay burning man! Not just for the 1%. More like 0.5%.';
break;
default:
newFeedback = '# ERROR OCCURRED';
}
// Update text and refresh highlighting:
$('textarea#txt-people').val(newText);
SetupTextAreaAsHighlightWithinTextarea();
}
// Randomize style:
if (randomizeStyle) {
styleName = GetRandomStyle();
cmbStyleName.value = styleName;
}
// Randomize text:
if (randomizeBg) {
var newBg = GetRandomBackgroundString(styleName);
txtBackgroundColor.value = newBg;
}
GenerateAcks();
txtFeedback.value = newFeedback;
}
/**
* Downloads a file.
* @param {string} imgUrl Url of file (eg: image) to dowload.
* @param {string} fileName Filename for saved file.
*/
function DownloadFile(imgUrl, fileName) {
var link = document.createElement('a');
link.setAttribute('href', imgUrl);
link.setAttribute('download', fileName);
link.setAttribute('target', '_blank');
link.style.display = 'none';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
/**
* Downloads profile images.
*/
function DownloadProfileImages() {
// Get element references:
var txtPeople = document.getElementById('txt-people');
var txtFeedback = document.getElementById('txt-feedback');
// Split text apart:
var text = txtPeople.value;
var lines = text.split('\n');
var imagesDownloaded = 0;
var imagesFailed = 0;
// For each line:
for (var i = 0; i < lines.length; i++) {
var line = lines[i].trim();
if (line.indexOf(':') == -1) {
line = 'PERSON:' + line; // Default to big pic.
}
var idxSplit = line.indexOf(':');
var itemType =
line.substr(0, idxSplit).trim(); // Item type should be at the front.
var itemProperties = itemProperties =
line.substr(idxSplit + 1).trim().split(',');
// Add correct content for item type:
switch (itemType) {
case 'PERSON':
case 'PERSON_LITTLE_PIC':
case 'PERSON_NO_PIC':
case 'NAME':
// Get property values:
var username = '';
var imgSrcUrl = '';
if (itemProperties.length >= 2) {
username = itemProperties[1].trim();
username = username.replace('@google.com', '');
username = username.replace('@', '');
}
if (itemProperties.length >= 4) {
imgSrcUrl = itemProperties[3].trim();
}
if (imgSrcUrl == '') {
imgSrcUrl =
'https://moma-teams-photos.corp.google.com/photos/' + username;
}
if (imgSrcUrl != '' && username != '') {
var fileName = username + '.jpg';
DownloadFile(imgSrcUrl, fileName);
imagesDownloaded++;
} else {
imagesFailed++;
}
break;
}
}
txtFeedback.value =
('Images downloaded:' + String(imagesDownloaded) +
'\nFailed people downloads: ' + String(imagesFailed));
txtFeedback.style.color = '#000';
}
ack-generator.css:
/**
* Various CSS to render acknowledgement cards. Fun time!
*
* +---------------+
* | ##### |
* | o o |
* | \__`_/ | <== Looks just like me!
* | | | |
* | Andrew Noske |
* | anoske@ |
* | ASCII artist |
* +---------------+
*
* https://andrewnoske.com/wiki/JavaScript_-_Generating_Image_Boxes_from_a_Text_Area
*/
html {
height: 100%;
}
body {
font-family: "Overpass";
font-size: 13px;
margin: 0px;
padding: 0px;
}
.title {
font-size: 28px;
font-weight: bolder;
margin: 0px;
margin-bottom: 10px;
/* color: white; */
}
h1 {
font-size: 28px;
font-weight: bolder;
margin: 0px;
margin-bottom: 10px;
}
h2 {
font-size: 24px;
font-weight: bolder;
margin: 0px;
margin-bottom: 5px;
}
/*
* Links.
*/
a:link {
color: blue;
}
a:visited {
color: darkblue;
}
a:hover {
color: lightblue;
}
a:active {
color: blue;
}
/*
* Zoomable images:
*/
.slide-example-img
{
max-width: 120px;
max-height: 80px;
margin-right: 0;
transition: transform 0.8s;
transform-origin: top right;
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}
.slide-example-img:hover {
transform: scale(5.0);
transform-origin: top right;
}
.slide-example-img-left
{
max-height: 70px;
transition: transform 2.0s;
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
transform-origin: bottom left;
}
.slide-example-img-left:hover {
transform: scale(6.0);
transform-origin: bottom left;
}
.slide-example-img-big
{
max-width: 460px;
max-height: 200px;
transition: transform 2.0s;
box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
transform-origin: top left;
}
.slide-example-img-big:hover {
transform: scale(2.0);
transform-origin: top left;
}
.slide-example-img-big-container
{
display: inline-block;
margin: 20px;
}
/*
* Banner / nav:
*/
#div-banner {
margin: 0;
padding: 0;
width: 100%;
}
#div-banner-top {
background-color: rgb(163,218,255); /* Blue */
background: linear-gradient(180deg, rgba(77,170,232,1) 0%, rgba(77,170,232,1) 75%, rgba(36,134,199,1) 100%);
padding: 10px 10px 0px 20px;
min-height: 60px;
}
#div-banner-bottom {
background-color: rgb(230, 230, 230); /* Grey */
margin: 0px;
padding: 5px 15px 5px 15px;
min-height: 20px;
}
.nav {
display: block;
color: white;
}
.nav-item {
font-size: 16px;
font-weight: bolder;
margin: 0px;
display: inline-block;
border: 1px solid rgba(0,0,0, 0.2);
}
.nav-item a {
color: white;
text-decoration: none;
width: 80px;
padding: 3px;
padding-left: 10px;
padding-right: 10px;
}
.nav-item a:hover {
background: rgba(32, 33, 36, 0.28);
}
.nav-current{
background: rgba(32, 33, 36, 0.28);
}
/*
* Div area CSS pieces:
*/
#div-main-content {
margin: 0px;
padding: 15px;
/* background-color: #fffdfa; */ /* Light orange */
}
#div-tips-area {
background: #eeeeee;
padding: 5px 0px 0px 5px;
}
#txt-feedback {
margin-left: 15px;
border: 0px solid #6b90da;
color: #999;
background: #eeeeee;
width: 90%;
}
.process-step {
font-size: 14px;
font-weight: bolder;
line-height: 14px;
padding-bottom: 10px;
}
.process-step a {
color: #000;
}
.randomize-area {
margin: 15px;
margin-top: 10px;
zoom: 0.8; /* Make these buttons small. */
}
/*
* Buttons:
*/
.blue-button {
background-color: rgb(163,218,255); /* Blue */
background: linear-gradient(180deg, rgba(77,170,232,1) 0%, rgba(77,170,232,1) 75%, rgba(36,134,199,1) 100%);
margin: 0px;
margin-left: 10px;
margin-right: 10px;
padding: 15px 15px 15px 15px;
min-height: 20px;
min-width: 120px;
border-radius: 8px;
color: white;
font-weight: bolder;
font-size: 14px;
text-align: center;
transition: all 0.5s;
cursor: pointer;
}
.blue-button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.blue-button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.blue-button:hover span {
padding-right: 25px;
}
.blue-button:hover span:after {
opacity: 1;
right: 0;
}
.blue-button:hover {
background: linear-gradient(180deg, rgba(77,170,232,1) 0%, rgba(36,134,199,1) 75%, rgba(36,134,199,1) 100%);
}
.blue-button:active {
}
.little-button {
padding: 5px 5px 5px 5px;
font-size: 12px;
}
/* ============================================================ */
.resizable-content-area {
resize: both;
overflow: auto;
display: inline-block;
width: 95%;
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
#div-credit-area {
text-align: right;
font-size: 80%;
margin: 2px 15px 10px 15px;
}
/*
* ============================================================
* master-moma-cards
* ============================================================
*/
.master-moma-cards {
padding: 20px;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
text-decoration: none;
color: #000;
vertical-align: top;
}
/* Team area */
.master-moma-cards .team-area {
border: 0;
padding: 5px;
border-radius: 8px;
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
flex: 1 1 0;
margin: 10px;
margin-right: 20px;
margin-bottom: 20px;
padding: 12px;
background: white;
display: inline-block;
vertical-align: top;
}
.master-moma-cards .team-area .team-header {
font-size: 18px;
font-weight: bolder;
}
/* Person area */
.master-moma-cards .person-area {
border-radius: 8px;
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
flex: 1 1 0;
margin: 10px;
padding: 12px;
max-width: 120px;
background: white;
vertical-align: top;
display: inline-block;
}
.master-moma-cards .person-area .person-name {
font-size: 16px;
color: #174ea6; /* Dark blue. */
width: 120px;
}
.master-moma-cards .person-area .person-big-pic {
object-fit: cover;
object-position: center;
margin-left: 20px;
margin-right: 20px;
border-radius: 50%;
width: 72px;
height: 72px;
}
.master-moma-cards .person-area .person-little-pic {
object-fit: cover;
object-position: center;
margin-left: 30px;
margin-right: 30px;
border-radius: 50%;
width: 52px;
height: 52px;
}
.master-moma-cards .person-area .person-username {
font-size: 12px;
width: 110px;
}
.master-moma-cards .person-area .person-username a {
color: #3c4043;
text-decoration: none;
}
.master-moma-cards .person-area .person-comment {
font-size: 12px;
color: #80868b;
line-height: 1.34;
width: 110px;
}
/* Name area */
.master-moma-cards .name-area {
font-size: 16px;
margin-left: 15px;
}
.master-moma-cards .name-area .person-name {
font-size: 16px;
color: #174ea6; /* Dark blue. */
display: inline-block;
}
.master-moma-cards .name-area .person-username {
font-size: 12px;
display: inline-block;
margin-left: 5px;
}
.master-moma-cards .name-area .person-username a {
color: #3c4043;
text-decoration: none;
}
.master-moma-cards .name-area .person-comment {
font-size: 12px;
color: #80868b;
line-height: 1.34;
margin-left: 5px;
display: inline-block;
}
/*
* ============================================================
* master-big-moma
* ============================================================
*/
.master-big-moma {
padding: 20px;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
text-decoration: none;
color: #000;
vertical-align: top;
}
/* Team area */
.master-big-moma .team-area {
border: 0;
padding: 5px;
border-radius: 8px;
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
flex: 1 1 0;
margin: 10px;
margin-right: 20px;
margin-bottom: 20px;
padding: 12px;
background: white;
max-width: 50%;
}
.master-big-moma .team-area .team-header {
font-size: 24px;
font-weight: bolder;
}
/* Person area */
.master-big-moma .person-area {
border-radius: 8px;
box-shadow: 0 1px 6px rgba(32,33,36,0.28);
flex: 1 1 0;
margin: 10px;
padding: 12px;
max-width: 220px;
background: white;
vertical-align: top;
display: inline-block;
}
.master-big-moma .person-area .person-name {
font-size: 24px;
color: #174ea6; /* Dark blue. */
width: 120px;
}
.master-big-moma .person-area .person-big-pic {
object-fit: cover;
object-position: center;
border-radius: 5px;
width: 142px;
height: 142px;
}
.master-big-moma .person-area .person-little-pic {
object-fit: cover;
object-position: center;
margin-left: 30px;
margin-right: 30px;
border-radius: 50%;
width: 92px;
height: 92px;
}
.master-big-moma .person-area .person-username {
font-size: 14px;
width: 110px;
}
.master-big-moma .person-area .person-username a {
color: #3c4043;
text-decoration: none;
}
.master-big-moma .person-area .person-comment {
font-size: 14px;
color: #80868b;
line-height: 1.34;
width: 110px;
}
/* Name area */
.master-big-moma .name-area {
font-size: 16px;
margin-left: 15px;
}
.master-big-moma .name-area .person-name {
font-size: 24px;
color: #174ea6; /* Dark blue. */
display: inline-block;
}
.master-big-moma .name-area .person-username {
font-size: 14px;
display: inline-block;
margin-left: 5px;
}
.master-big-moma .name-area .person-username a {
color: #3c4043;
text-decoration: none;
}
.master-big-moma .name-area .person-comment {
font-size: 14px;
color: #80868b;
line-height: 1.34;
margin-left: 5px;
display: inline-block;
}
/*
* ============================================================
* master-teams-round
* ============================================================
*/
.master-teams-round {
position: relative;
padding: 20px;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
text-decoration: none;
color: #000;
}
/* Team area */
.master-teams-round .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
position: relative;
}
.master-teams-round .team-area .team-header {
font-size: 18px;
font-weight: bolder;
}
/* Person area */
.master-teams-round .person-area {
width: 200px;
margin: 10px;
max-width: 90px;
display: inline-block;
position: relative;
min-width: 300px;
min-height: 100px;
}
.master-teams-round .person-area .person-name {
position: absolute;
top: 35px;
left: 50px;
font-size: 14px;
font-weight: bolder;
padding: 5px;
padding-left: 60px;
border: 0px solid grey;
font-size: 20px;
font-weight: bolder;
background: #1967d2;
color: white;
width: 180px;
height: 30px;
line-height: 30px;
}
.master-teams-round .person-area .person-big-pic {
z-index: 1; /* In front. */
position: absolute;
border-radius: 50%;
border: 4px solid #1967d2;
object-fit: cover;
object-position: center;
width: 90px;
height: 90px;
}
.master-teams-round .person-area .person-little-pic {
z-index: 1; /* In front. */
position: absolute;
top: 20px;
border-radius: 50%;
border: 4px solid #1967d2;
object-fit: cover;
object-position: center;
width: 60px;
height: 60px;
}
.master-teams-round .person-area .person-username {
position: absolute;
top: 80px;
left: 100px;
font-size: 12px;
font-style: italic;
}
.master-teams-round .person-area .person-username a {
color: #000;
text-decoration: none;
}
.master-teams-round .person-area .person-comment {
position: absolute;
top: 80px;
right: 0px;
text-align: right;
width: 100px;
font-size: 12px;
}
/* Name area */
.master-teams-round .name-area {
margin-left: 10px;
display: inline-block;
}
.master-teams-round .name-area .person-name {
font-size: 14px;
font-weight: bolder;
display: inline;
}
.master-teams-round .name-area .person-username {
margin-left: 5px;
font-size: 10px;
font-style: italic;
display: inline;
}
.master-teams-round .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-teams-round .name-area .person-comment {
margin-left: 5px;
font-size: 10px;
display: inline;
}
/*
* ============================================================
* master-teams-small
* ============================================================
*/
.master-teams-small {
padding: 20px;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
text-decoration: none;
color: rgb(62, 62, 62);
}
/* Team area */
.master-teams-small .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
border-radius: 8px 8px 0px 0px;
box-shadow: 0 1px 6px rgba(32,33,36,0.5);
margin: 10px;
padding: 0px;
background: white;
max-width: 340px;
}
.master-teams-small .team-area .team-header {
padding: 10px;
font-size: 12px;
}
.master-teams-small .team-area .team-text {
margin-left: 15px;
}
/* Person area */
.master-teams-small .person-area {
border-top: 1px solid #ccc;
box-sizing: border-box;
margin: 0px;
padding: 5px;
min-width: 300px;
min-height: 30px;
background: white;
position: relative;
}
.master-teams-small .person-area .person-name {
font-size: 14px;
color: rgb(62, 62, 62); /* Dark blue. */
width: 130px;
position: absolute;
left: 70px;
top: 5px;
width: 250px;
}
.master-teams-small .person-area .person-big-pic {
object-fit: cover;
object-position: center;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
border-radius: 50%;
width: 36px;
height: 36px;
}
.master-teams-small .person-area .person-little-pic {
object-fit: cover;
object-position: center;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
border-radius: 50%;
width: 26px;
height: 26px;
}
.master-teams-small .person-area .person-username {
font-size: 12px;
width: 130px;
position: absolute;
text-align: right;
right: 10px;
top: 5px;
width: 80px;
}
.master-teams-small .person-area .person-username a {
color: #3e3e3e;
}
.master-teams-small .person-area .person-comment {
font-size: 12px;
color: rgba(0,0,0,0.54);
line-height: 16px;
overflow: hidden;
white-space: nowrap;
position: absolute;
left: 70px;
top: 20px;
width: 350px;
}
/* Name area */
.master-teams-small .name-area {
font-size: 14px;
color: rgb(62, 62, 62); /* Dark blue. */
width: 130px;
}
.master-teams-small .name-area .person-name {
font-size: 14px;
display: inline;
margin-left: 20px;
}
.master-teams-small .name-area .person-username {
font-size: 12px;
width: 130px;
margin-left: 20px;
}
.master-teams-small .name-area .person-username a {
color: #3e3e3e;
margin-left: 20px;
}
.master-teams-small .name-area .person-comment {
font-size: 12px;
color: rgba(0,0,0,0.54);
line-height: 16px;
overflow: hidden;
white-space: nowrap;
width: 200px;
margin-left: 20px;
}
/*
* ============================================================
* master-grey-boxes
* ============================================================
*/
.master-grey-boxes {
padding: 20px;
font-family: Arial, Sans-serif;
text-decoration: none;
color: #000;
}
/* Team area */
.master-grey-boxes .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
min-width: 200px;
}
.master-grey-boxes .team-area .team-header {
font-size: 18px;
font-weight: bolder;
}
/* Person area */
.master-grey-boxes .person-area {
width: 200px;
margin: 10px;
padding: 5px;
background: rgb(238, 238, 238);
max-width: 90px;
border: 1px solid grey;
display: inline-block;
}
.master-grey-boxes .person-area .person-name {
font-size: 14px;
font-weight: bolder;
}
.master-grey-boxes .person-area .person-big-pic {
object-fit: cover;
object-position: center;
width: 90px;
height: 90px;
}
.master-grey-boxes .person-area .person-little-pic {
object-fit: cover;
object-position: center;
width: 90px;
height: 60px;
}
.master-grey-boxes .person-area .person-username {
font-size: 10px;
font-style: italic;
}
.master-grey-boxes .person-area .person-username a {
color: #000;
text-decoration: none;
}
.master-grey-boxes .person-area .person-comment {
font-size: 12px;
}
/* Name area */
.master-grey-boxes .name-area {
margin-left: 10px;
display: inline-block;
}
.master-grey-boxes .name-area .person-name {
font-size: 14px;
font-weight: bolder;
display: inline;
}
.master-grey-boxes .name-area .person-username {
margin-left: 5px;
font-size: 10px;
font-style: italic;
display: inline;
}
.master-grey-boxes .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-grey-boxes .name-area .person-comment {
margin-left: 5px;
font-size: 10px;
display: inline;
}
/*
* ============================================================
* master-silver
* ============================================================
*/
.master-silver {
padding: 20px;
font-family: Arial, Sans-serif;
text-decoration: none;
color: #000;
position: relative;
}
/* Team area */
.master-silver .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
background-color: rgba(240, 240, 240, 0.5); /* Transparent orange */
border: 1px solid rgba(100, 100, 100, 0.5);
max-width: 440px;
position: relative;
}
.master-silver .team-area .team-header {
font-size: 18px;
font-weight: bolder;
}
/* Person area */
.master-silver .person-area {
min-width: 180px;
min-height: 60px;
margin: 10px;
padding: 5px;
background: #fafafa;
max-width: 90px;
border: 1px solid #eee;
display: inline-block;
position: relative;
}
.master-silver .person-area .person-name {
font-size: 14px;
font-weight: bold;
position: absolute;
width: 100px;
left: 80px;
top: 5px;
}
.master-silver .person-area .person-big-pic {
object-fit: cover;
object-position: center;
width: 60px;
height: 60px;
}
.master-silver .person-area .person-little-pic {
object-fit: cover;
object-position: center;
width: 60px;
height: 50px;
}
.master-silver .person-area .person-username {
font-size: 12px;
position: absolute;
width: 100px;
left: 80px;
top: 25px;
}
.master-silver .person-area .person-username a {
color: #245dc1;
text-decoration: none;
}
.master-silver .person-area .person-comment {
font-size: 12px;
position: absolute;
width: 100px;
left: 80px;
top: 45px;
}
/* Name area */
.master-silver .name-area {
margin-left: 10px;
display: inline-block;
}
.master-silver .name-area .person-name {
font-size: 14px;
font-weight: bolder;
display: inline;
}
.master-silver .name-area .person-username {
margin-left: 5px;
font-size: 10px;
font-style: italic;
display: inline;
}
.master-silver .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-silver .name-area .person-comment {
margin-left: 5px;
font-size: 10px;
display: inline;
}
/*
* ============================================================
* master-midnight
* ============================================================
*/
.master-midnight {
padding: 20px;
font-family: Overpass;
color: white;
}
/* Team area */
.master-midnight .team-area {
margin-bottom: 20px;
border: 2px solid #aaa;
padding: 5px;
color: black;
background: #bbb;
min-width: 80px;
}
.master-midnight .team-area .team-header {
font-size: 18px;
font-weight: bolder;
}
/* Person area */
.master-midnight .person-area {
margin: 10px;
padding: 5px;
max-width: 90px;
border-radius: 8px;
border: 2px solid #111;
color: white;
background: #666;
display: inline-block;
}
.master-midnight .person-area .person-name {
font-size: 14px;
font-weight: bolder;
}
.master-midnight .person-area .person-big-pic {
object-fit: cover;
object-position: center;
width: 90px;
height: 90px;
display: inline-block;
}
.master-midnight .person-area .person-little-pic {
object-fit: cover;
object-position: center;
width: 60px;
height: 60px;
display: inline-block;
}
.master-midnight .person-area .person-username {
font-size: 10px;
font-style: italic;
}
.master-midnight .person-area .person-username a {
color: #ccc;
}
.master-midnight .person-area .person-comment {
font-size: 12px;
}
/* Name area */
.master-midnight .name-area {
margin-left: 10px;
display: inline-block;
}
.master-midnight .name-area .person-name {
font-size: 14px;
font-weight: bolder;
display: inline;
}
.master-midnight .name-area .person-username {
margin-left: 5px;
font-size: 10px;
font-style: italic;
display: inline;
}
.master-midnight .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-midnight .name-area .person-comment {
margin-left: 5px;
font-size: 10px;
display: inline;
}
/*
* ============================================================
* master-plain
* ============================================================
*/
.master-plain {
padding: 20px;
font-family: "Times New Roman", Times, serif;
text-decoration: none;
color: #000;
}
/* Team area */
.master-plain .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
}
.master-plain .team-area .team-header {
font-size: 20px;
color: #1967d2;
font-weight: bolder;
}
/* Person area */
.master-plain .person-area {
width: 200px;
margin: 10px;
padding: 5px;
display: inline-block;
}
.master-plain .person-area .person-name {
font-size: 16px;
font-weight: bolder;
}
.master-plain .person-area .person-big-pic {
object-fit: cover;
object-position: center;
width: 90px;
height: 90px;
}
.master-plain .person-area .person-little-pic {
object-fit: cover;
object-position: center;
width: 90px;
height: 60px;
}
.master-plain .person-area .person-username {
font-size: 12px;
font-style: italic;
}
.master-plain .person-area .person-username a {
color: #000;
text-decoration: none;
}
.master-plain .person-area .person-comment {
font-size: 12px;
}
/* Name area */
.master-plain .name-area {
margin-left: 10px;
display: inline-block;
}
.master-plain .name-area .person-name {
font-size: 16px;
font-weight: bolder;
display: inline;
}
.master-plain .name-area .person-username {
margin-left: 5px;
font-size: 12px;
font-style: italic;
display: inline;
}
.master-plain .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-plain .name-area .person-comment {
margin-left: 5px;
font-size: 12px;
display: inline;
}
/*
* ============================================================
* master-orange-barf
* ============================================================
*/
.master-orange-barf {
padding: 20px;
font-family: Arial, Sans-serif;
}
/* Team area */
.master-orange-barf .team-area {
margin-bottom: 20px;
border: 2px solid #aaa;
padding: 5px;
color: black;
background-color: rgba(255, 247, 235, 0.5); /* Transparent orange */
/* background-color: #fffdfa; */ /* Light orange */
min-width: 120px;
}
.master-orange-barf .team-area .team-header {
font-size: 18px;
font-weight: bolder;
color: #ba7000;
}
/* Person area */
.master-orange-barf .person-area {
margin: 10px;
padding: 10px;
max-width: 130px;
border-radius: 0px 0px 0px 20px;
border: 2px solid #ba7000;
color: white;
background-color: #e69100; /* Orange */
vertical-align: top;
display: inline-block;
color: white;
}
.master-orange-barf .person-area .person-name {
font-size: 20px;
text-align: center;
font-weight: bolder;
}
.master-orange-barf .person-area .person-big-pic {
object-fit: cover;
object-position: center;
max-width: 120px;
max-height: 120px;
display: inline-block;
}
.master-orange-barf .person-area .person-little-pic {
max-width: 80px;
max-height: 80px;
display: inline-block;
}
.master-orange-barf .person-area .person-username {
font-size: 10px;
font-style: italic;
}
.master-orange-barf .person-area .person-username a {
color: #fffdfa;
}
.master-orange-barf .person-area .person-comment {
font-size: 12px;
}
/* Name area */
.master-orange-barf .name-area {
margin-left: 10px;
vertical-align: top;
display: inline-block;
color: #000;
}
.master-orange-barf .name-area .person-name {
font-size: 14px;
font-weight: bolder;
display: inline;
}
.master-orange-barf .name-area .person-username {
margin-left: 5px;
font-size: 10px;
font-style: italic;
display: inline;
}
.master-orange-barf .name-area .person-username a {
text-decoration: none;
display: inline;
}
.master-orange-barf .name-area .person-comment {
margin-left: 5px;
font-size: 10px;
display: inline;
}
/*
* ============================================================
* master-blue-barf
* ============================================================
*/
.master-blue-barf {
padding: 20px;
font-family: Arial, Sans-serif;
}
/* Team area */
.master-blue-barf .team-area {
margin-bottom: 20px;
border: 1px solid #eee;
padding: 5px;
color: black;
background-color: white; /* Transparent red */
min-width: 120px;
border-radius: 5px;
}
.master-blue-barf .team-area .team-header {
font-size: 18px;
font-weight: bolder;
color: darkblue;
}
/* Person area */
.master-blue-barf .person-area {
margin: 10px;
padding: 10px;
width: 140px;
border-radius: 5px 5px 5px 5px;
border: 1px solid grey;
color: white;
background-color: rgb(163,218,255); /* Blue */
background: linear-gradient(180deg, rgba(77,170,232,1) 0%, rgba(36,134,199,1) 75%, rgba(36,134,199,1) 100%);
vertical-align: top;
display: inline-block;
}
.master-blue-barf .person-area .person-name {
font-size: 20px;
text-align: center;
font-weight: bolder;
}
.master-blue-barf .person-area .person-big-pic {
object-fit: cover;
object-position: center;
width: 140px;
height: 120px;
display: inline-block;
}
.master-blue-barf .person-area .person-little-pic {
object-fit: cover;
object-position: center;
max-width: 80px;
max-height: 80px;
display: inline-block;
}
.master-blue-barf .person-area .person-username {
font-size: 10px;
font-style: italic;
}
.master-blue-barf .person-area .person-username a {
color: #fffdfa;
}
.master-blue-barf .person-area .person-comment {
font-size: 12px;
}
/* Name area */
.master-blue-barf .name-area {
margin-left: 10px;
vertical-align: top;
display: inline-block;
color: #000;
}
.master-blue-barf .name-area .person-name {
font-size: 14px;
font-weight: bolder;
display: inline;
}
.master-blue-barf .name-area .person-username {
margin-left: 5px;
font-size: 10px;
font-style: italic;
display: inline;
}
.master-blue-barf .name-area .person-username a {
text-decoration: none;
display: inline;
}
.master-blue-barf .name-area .person-comment {
margin-left: 5px;
font-size: 12px;
display: inline;
}
/*
* ============================================================
* master-red-barf
* ============================================================
*/
.master-red-barf {
padding: 20px;
font-family: Arial, Sans-serif;
}
/* Team area */
.master-red-barf .team-area {
margin-bottom: 20px;
border: 2px solid #aaa;
padding: 5px;
color: black;
background-color: rgba(255, 247, 247, 0.5); /* Transparent red */
min-width: 120px;
border-radius: 0px 0px 0px 30px;
}
.master-red-barf .team-area .team-header {
font-size: 18px;
font-weight: bolder;
color: #cc0000;
}
/* Person area */
.master-red-barf .person-area {
margin: 10px;
padding: 10px;
max-width: 130px;
border-radius: 0px 0px 0px 20px;
border: 1px dashed white;
border-style: dashed;
color: white;
background-color: #cc0000; /* Red. */
vertical-align: top;
display: inline-block;
}
.master-red-barf .person-area .person-name {
font-size: 20px;
text-align: center;
font-weight: bolder;
}
.master-red-barf .person-area .person-big-pic {
object-fit: cover;
object-position: center;
width: 140px;
height: 120px;
display: inline-block;
}
.master-red-barf .person-area .person-little-pic {
object-fit: cover;
object-position: center;
max-width: 80px;
max-height: 80px;
display: inline-block;
}
.master-red-barf .person-area .person-username {
font-size: 10px;
font-style: italic;
}
.master-red-barf .person-area .person-username a {
color: #fffdfa;
}
.master-red-barf .person-area .person-comment {
font-size: 12px;
}
/* Name area */
.master-red-barf .name-area {
margin-left: 10px;
vertical-align: top;
display: inline-block;
color: #000;
}
.master-red-barf .name-area .person-name {
font-size: 14px;
font-weight: bolder;
display: inline;
}
.master-red-barf .name-area .person-username {
margin-left: 5px;
font-size: 10px;
font-style: italic;
display: inline;
}
.master-red-barf .name-area .person-username a {
text-decoration: none;
display: inline;
}
.master-red-barf .name-area .person-comment {
margin-left: 5px;
font-size: 12px;
display: inline;
}
/*
* ============================================================
* master-youtube-red
* ============================================================
*/
.master-youtube-red {
padding: 20px;
font-family: Roboto, Noto, sans-serif;;
}
/* Team area */
.master-youtube-red .team-area {
margin-bottom: 20px;
border: 0px;
padding: 5px;
color: black;
min-width: 120px;
background-color: rgb(250, 250, 250);
}
.master-youtube-red .team-area .team-header {
font-size: 24px;
font-weight: 900;
}
/* Person area */
.master-youtube-red .person-area {
margin: 10px;
padding: 10px;
max-width: 150px;
border-radius: 5px 5px 5px 5px;
background-color: white;
display: inline-block;
vertical-align: top;
color: rgb(96, 96, 96);
}
.master-youtube-red .person-area .person-name {
font-size: 20px;
text-align: center;
font-weight: 500;
padding: 5px;
background-color: #cc0000; /* Red. */
color: white;
letter-spacing: 0.007px;
/* text-transform: uppercase; */
}
.master-youtube-red .person-area .person-big-pic {
object-fit: cover;
object-position: center;
margin-left: 10px;
margin-right: 10px;
border-radius: 50%;
width: 92px;
height: 92px;
}
.master-youtube-red .person-area .person-little-pic {
object-fit: cover;
object-position: center;
margin-left: 30px;
margin-right: 30px;
border-radius: 50%;
width: 62px;
height: 62px;
}
.master-youtube-red .person-area .person-username {
font-size: 10px;
font-style: italic;
margin: 5px;
}
.master-youtube-red .person-area .person-username a {
}
.master-youtube-red .person-area .person-comment {
font-size: 12px;
margin: 5px;
}
/* Name area */
.master-youtube-red .name-area {
margin-left: 10px;
display: inline-block;
color: rgb(96, 96, 96);
}
.master-youtube-red .name-area .person-name {
font-size: 20px;
text-align: center;
font-weight: 500;
padding: 5px;
background-color: #cc0000;
color: white;
letter-spacing: 0.007px;
/* text-transform: uppercase; */
}
.master-youtube-red .name-area .person-username {
font-size: 10px;
font-style: italic;
margin: 5px;
}
.master-youtube-red .name-area .person-username a {
}
.master-youtube-red .name-area .person-comment {
font-size: 12px;
margin: 5px;
}
/*
* ============================================================
* master-corgi
* ============================================================
*/
.master-corgi {
padding: 20px;
font-family: Roboto, Noto, sans-serif;
}
/* Team area */
.master-corgi .team-area {
margin-bottom: 20px;
border: 0px;
padding: 5px;
color: black;
min-width: 120px;
background-color: rgb(250, 250, 250);
}
.master-corgi .team-area .team-header {
font-size: 24px;
font-weight: 900;
}
/* Person area */
.master-corgi .person-area {
margin: 10px;
padding: 10px;
max-width: 150px;
border-radius: 5px 5px 5px 5px;
background-color: white;
display: inline-block;
color: rgb(96, 96, 96);
background-image: url("images/decoration/corgi.png");
padding-top: 70px;
background-repeat: no-repeat;
background-size: 90px 40px;
vertical-align: top;
position: relative;
color: rgb(96, 96, 96);
}
.master-corgi .person-area .person-name {
font-size: 20px;
text-align: center;
font-weight: 500;
padding: 5px;
background-color: #dc9d5b;
color: white;
letter-spacing: 0.007px;
text-transform: uppercase;
top: 40px;
height: 25px;
width: 100px;
position: absolute;
}
.master-corgi .person-area .person-big-pic {
object-fit: cover;
object-position: center;
border-radius: 2px;
width: 110px;
height: 110px;
}
.master-corgi .person-area .person-little-pic {
object-fit: cover;
object-position: center;
margin-left: 30px;
margin-right: 30px;
border-radius: 2px;
width: 62px;
height: 62px;
}
.master-corgi .person-area .person-username {
font-size: 10px;
font-style: italic;
margin: 5px;
right: 5px;
top: 0px;
position: absolute;
}
.master-corgi .person-area .person-username a {
color: black;
}
.master-corgi .person-area .person-comment {
font-size: 12px;
margin: 5px;
}
/* Name area */
.master-corgi .name-area {
margin-left: 10px;
display: inline-block;
color: rgb(96, 96, 96);
}
.master-corgi .name-area .person-name {
font-size: 20px;
text-align: center;
font-weight: 500;
padding: 5px;
background-color: #dc9d5b;
color: white;
letter-spacing: 0.007px;
text-transform: uppercase;
top: 40px;
height: 25px;
width: 100px;
}
.master-corgi .name-area .person-username {
font-size: 10px;
font-style: italic;
margin: 5px;
}
.master-corgi .name-area .person-username a {
color: black;
}
.master-corgi .name-area .person-comment {
font-size: 12px;
margin: 5px;
}
/*
* ============================================================
* master-kitty
* ============================================================
*/
.master-kitty {
position: relative;
padding: 20px;
font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
text-decoration: none;
color: #000;
}
/* Team area */
.master-kitty .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
position: relative;
}
.master-kitty .team-area .team-header {
font-size: 26px;
color: slategrey;
font-weight: bolder;
}
/* Person area */
.master-kitty .person-area {
margin: 10px;
max-width: 90px;
display: inline-block;
position: relative;
min-width: 120px;
min-height: 180px;
}
.master-kitty .person-area .person-name {
position: absolute;
top: 2px;
left: 2px;
font-size: 14px;
font-weight: bolder;
text-align: left;
font-size: 20px;
padding: 5px;
padding-top: 0px;
font-weight: bolder;
text-shadow: 1px 1px 4px rgba(32,33,36,0.9);
background: #00000033;
color: white;
width: 112px;
height: 26px;
line-height: 30px;
}
.master-kitty .person-area .person-big-pic {
position: absolute;
border-radius: 5%;
border: 2px solid #aa705b;
object-fit: cover;
object-position: center;
width: 120px;
height: 150px;
}
.master-kitty .person-area .person-little-pic {
position: absolute;
border-radius: 5%;
border: 2px solid #aa705b;
object-fit: cover;
object-position: center;
width: 60px;
height: 60px;
}
.master-kitty .person-area .person-username {
position: absolute;
top: 136px;
left: 8px;
width: 120px;
font-size: 12px;
font-style: italic;
text-shadow: 1px 1px 4px rgba(32,33,36,0.9);
color: white;
}
.master-kitty .person-area .person-username a {
color: white;
text-decoration: none;
}
.master-kitty .person-area .person-comment {
position: absolute;
top: 160px;
left: 10px;
text-align: left;
width: 120px;
font-size: 12px;
}
/* Decorations */
.master-kitty .person-area .decoration {
z-index: 1; /* In front. */
position: absolute;
top: 100px;
left: 50px;
background: url("images/decoration/kitty_transparent.png") no-repeat center;
background-size: 90px 64px;
width: 90px;
height: 64px;
}
/* Name area */
.master-kitty .name-area {
margin-left: 10px;
display: inline-block;
}
.master-kitty .name-area .person-name {
font-size: 20px;
font-weight: bolder;
text-shadow: 1px 1px 4px rgba(250,250,250,0.9);
display: inline;
}
.master-kitty .name-area .person-username {
margin-left: 5px;
font-size: 12px;
font-style: italic;
display: inline;
}
.master-kitty .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-kitty .name-area .person-comment {
margin-left: 5px;
font-size: 12px;
display: inline;
}
/*
* ============================================================
* master-goomics
* ============================================================
*/
.master-goomics {
position: relative;
padding: 20px;
font-family: "Comic Sans MS", "Comic Sans", cursive;
text-decoration: none;
color: #000;
}
/* Team area */
.master-goomics .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
position: relative;
background: linear-gradient(to bottom, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0.9) 100%),
url("images/backgrounds/background_goomics_book_faded.jpg") repeat repeat;
background-size: 350px 455px;
}
.master-goomics .team-area .team-header {
font-size: 28px;
color: white;
padding: 10px;
font-weight: bolder;
background: linear-gradient(#f55, #a00);
}
/* Person area */
.master-goomics .person-area {
margin: 10px;
margin-right: 30px;
max-width: 90px;
display: inline-block;
position: relative;
min-width: 160px;
min-height: 240px;
vertical-align: top;
}
.master-goomics .person-area .person-name {
top: 2px;
left: 2px;
font-size: 14px;
font-weight: bolder;
text-align: left;
font-size: 20px;
padding: 5px;
padding-top: 0px;
font-weight: bolder;
border-radius: 10px;
border: 2px solid black;
background: white;
color: black;
width: 140px;
height: 26px;
line-height: 30px;
}
.master-goomics .person-area .person-big-pic {
position: absolute;
top: 40px;
border-radius: 10px;
border: 2px solid black;
object-fit: cover;
object-position: center;
width: 150px;
height: 170px;
}
.master-goomics .person-area .person-little-pic {
position: absolute;
border-radius: 5%;
border: 2px solid #aa705b;
object-fit: cover;
object-position: center;
width: 60px;
height: 60px;
}
.master-goomics .person-area .person-username {
position: absolute;
text-align: right;
top: 220px;
right: 10px;
width: 150px;
height: 20px;
font-size: 12px;
font-style: italic;
text-shadow: 1px 1px 4px rgba(250,250,250,0.8);
color: black;
}
.master-goomics .person-area .person-username a {
color: shadow;
text-decoration: none;
color: black;
}
.master-goomics .person-area .person-comment {
position: absolute;
top: 190px;
left: 40px;
text-align: center;
vertical-align: middle;
width: 120px;
height: 26px;
font-size: 12px;
overflow-y: hidden;
line-height: 1.0;
}
/* Decorations */
.master-goomics .person-area .decoration {
position: absolute;
top: 180px;
left: -10px;
background: url("images/decoration/goomics_guy_bubble_glow.png") no-repeat center;
background-size: 100% 100%;
width: 180px;
height: 60px;
}
/* Name area */
.master-goomics .name-area {
margin-left: 10px;
display: inline-block;
}
.master-goomics .name-area .person-name {
font-size: 20px;
font-weight: bolder;
text-shadow: 1px 1px 4px rgba(250,250,250,0.9);
display: inline;
}
.master-goomics .name-area .person-username {
margin-left: 5px;
font-size: 12px;
font-style: italic;
display: inline;
}
.master-goomics .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-goomics .name-area .person-comment {
margin-left: 5px;
font-size: 12px;
display: inline;
}
/*
* ============================================================
* master-burning-man
* ============================================================
*/
.master-burning-man {
position: relative;
padding: 14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-decoration: none;
color: black;
}
/* Team area */
.master-burning-man .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
position: relative;
background: white;
background-size: 350px 455px;
}
.master-burning-man .team-area .team-header {
font-size: 28px;
color: white;
padding: 10px;
font-weight: bolder;
}
/* Person area */
.master-burning-man .person-area {
position: relative;
width: 400px;
height: 600px;
padding: 0px;
margin: 10px;
margin-right: 30px;
display: inline-block;
vertical-align: top;
border: 2px solid black;
background: url("images/card-backgrounds/burning_man_profile_card_bg.png") no-repeat center;
background-size: 400px 600px;
}
.master-burning-man .person-area .person-name { /* Real name */
position: absolute;
top: 5px;
left: 10px;
width: 220px;
height: 60px;
font-size: 34px;
text-align: left;
padding: 0;
font-weight: bolder;
}
.master-burning-man .person-area .person-big-pic {
position: absolute;
top: 50px;
left: 8px;
width: 380px;
height: 380px;
border: 2px solid #ccc;
object-fit: cover;
object-position: center;
}
.master-burning-man .person-area .person-little-pic {
position: absolute;
top: 50px;
left: 8px;
width: 380px;
height: 380px;
border: 2px solid #aa705b;
object-fit: cover;
object-position: center;
width: 380px;
height: 200px;
}
.master-burning-man .person-area .person-username { /* Burning man name */
position: absolute;
top: 5px;
right: 0px;
width: 280px;
height: 50px;
font-size: 32px;
text-align: right;
font-style: italic;
font-stretch: condensed;
transform: scale(0.9, 1.0);
}
.master-burning-man .person-area .person-username a {
color: shadow;
text-decoration: none;
color: black;
}
.master-burning-man .person-area .person-comment {
position: absolute;
top: 468px;
left: 120px;
text-align: left;
vertical-align: top;
width: 300px;
height: 26px;
font-size: 18px;
overflow-y: hidden;
}
/* Name area */
.master-burning-man .name-area {
margin-left: 10px;
display: inline-block;
}
.master-burning-man .name-area .person-name {
font-size: 20px;
font-weight: bolder;
text-shadow: 1px 1px 4px rgba(250,250,250,0.9);
display: inline;
}
.master-burning-man .name-area .person-username {
margin-left: 5px;
font-size: 12px;
font-style: italic;
display: inline;
}
.master-burning-man .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-burning-man .name-area .person-comment {
margin-left: 5px;
font-size: 12px;
display: inline;
}
/* Extra piecees (master-burning-man specific) */
.master-burning-man .person-area .person-location {
position: absolute;
top: 442px;
left: 120px;
text-align: left;
vertical-align: top;
width: 300px;
height: 26px;
font-size: 18px;
overflow-y: hidden;
line-height: 1.0;
}
.master-burning-man .person-area .person-status {
position: absolute;
top: 494px;
right: 0px;
text-align: right;
vertical-align: top;
width: 300px;
height: 26px;
font-size: 18px;
overflow-y: hidden;
line-height: 1.0;
background-size: 400px 600px;
color: #ddd;
transform: scale(0.9, 1.0);
}
/*
* ============================================================
* master-burning-cubby
* ============================================================
*/
. {
position: relative;
padding: 14px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
text-decoration: none;
color: black;
}
/* Team area */
.master-burning-cubby .team-area {
margin-bottom: 20px;
border: 0;
padding: 5px;
position: relative;
background: white;
background-size: 350px 455px;
}
.master-burning-cubby .team-area .team-header {
font-size: 28px;
color: white;
padding: 10px;
font-weight: bolder;
}
/* Person area */
.master-burning-cubby .person-area {
position: relative;
width: 1000px;
height: 400px;
padding: 0px;
margin: 10px;
margin-right: 30px;
display: inline-block;
vertical-align: top;
border: 2px solid black;
background: url("images/card-backgrounds/burning_man_cubby_bg.png") no-repeat center;
background-size: 1000px 400px;
}
.master-burning-cubby .person-area .person-name { /* Real name */
position: absolute;
top: 12px;
left: 420px;
width: 700px;
height: 100px;
font-size: 82px;
text-align: left;
padding: 0;
font-weight: bolder;
}
.master-burning-cubby .person-area .person-big-pic {
position: absolute;
top: 8px;
left: 8px;
width: 380px;
height: 380px;
border: 2px solid #ccc;
object-fit: cover;
object-position: center;
}
.master-burning-cubby .person-area .person-little-pic {
position: absolute;
top: 50px;
left: 8px;
width: 280px;
height: 280px;
border: 2px solid #aa705b;
object-fit: cover;
object-position: center;
width: 380px;
height: 200px;
}
.master-burning-cubby .person-area .person-username { /* Burning man name */
position: absolute;
top: 102px;
left: 420px;
width: 1400px;
height: 120px;
font-size: 82px;
text-align: left;
font-style: italic;
font-stretch: condensed;
padding: 0;
transform: scale(0.8, 1.0);
transform-origin: left;
}
.master-burning-cubby .person-area .person-username a {
color: shadow;
text-decoration: none;
color: black;
}
.master-burning-cubby .person-area .person-comment {
position: absolute;
top: 480px;
left: 120px;
text-align: left;
vertical-align: top;
width: 600px;
height: 26px;
font-size: 18px;
overflow-y: hidden;
}
/* Name area */
.master-burning-cubby .name-area {
margin-left: 10px;
display: inline-block;
}
.master-burning-cubby .name-area .person-name {
font-size: 20px;
font-weight: bolder;
text-shadow: 1px 1px 4px rgba(250,250,250,0.9);
display: inline;
}
.master-burning-cubby .name-area .person-username {
margin-left: 5px;
font-size: 12px;
font-style: italic;
display: inline;
}
.master-burning-cubby .name-area .person-username a {
color: #000;
text-decoration: none;
display: inline;
}
.master-burning-cubby .name-area .person-comment {
margin-left: 5px;
font-size: 12px;
display: inline;
}
/* Extra piecees (master-burning-cubby specific) */
.master-burning-cubby .person-area .person-location {
position: absolute;
top: 260px;
left: 420px;
text-align: left;
vertical-align: top;
width: 600px;
height: 50px;
font-size: 46px;
overflow-y: hidden;
line-height: 1.0;
}
.master-burning-cubby .person-area .person-status {
position: absolute;
top: 320px;
left: 420px;
text-align: left;
vertical-align: top;
width: 600px;
height: 50px;
font-size: 46px;
overflow-y: hidden;
line-height: 1.0;
}
/* TODO(anoske): A "unicorn" would be fun*/
| Code license | For all of the code on my site... if there are specific instruction or licence comments please leave them in. If you copy my code with minimum modifications to another webpage, or into any code other people will see I would love an acknowledgment to my site.... otherwise, the license for this code is more-or-less WTFPL (do what you want)! If only copying <20 lines, then don't bother. That said - if you'd like to add a web-link to my site www.andrewnoske.com or (better yet) the specific page with code, that's a really sweet gestures! Links to the page may be useful to yourself or your users and helps increase traffic to my site. Hope my code is useful! :)
|
