Skip to content

Instantly share code, notes, and snippets.

@MJefferson

MJefferson/index.html

Last active September 21, 2021 22:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MJefferson/9bc90663c8e570a9a75a92c3cd8c3f6b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MJefferson/9bc90663c8e570a9a75a92c3cd8c3f6b to your computer and use it in GitHub Desktop.
Download ZIP
Electron Fiddle Gist
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Septimien</title>
<!-- Material via CDN -->
<link href="https://unpkg.com/material-components-web@3.2.0/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web@3.2.0/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://septimien-material-theme.glitch.me/my-theme.css">
<link rel="stylesheet" href="https://septimien-material-theme.glitch.me/style.css">
<link href="https://fonts.googleapis.com/css?family=Public+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<script async src='https://www.google-analytics.com/analytics.js'></script>
</head>
<body>
<div class="sidebar">
<h1 class="mdc-typography--headline5 demo-title">
<svg class="material-logo" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M23.8461538,12 C23.8461538,5.46307692 18.5369231,0.153846154 12,0.153846154 C5.46307692,0.153846154 0.153846154,5.46307692
0.153846154,12 C0.153846154,18.5369231 5.46307692,23.8461538 12,23.8461538 C18.5369231,23.8461538 23.8461538,18.5369231 23.8461538,12
Z M4.46153846,18.0738462 C3.11538462,16.4153846 2.30769231,14.3046154 2.30769231,12 C2.30769231,9.70615385 3.12615385,7.60615385
4.46153846,5.93692308 L4.46153846,18.0738462 Z M18.0738462,4.46153846 L5.92615385,4.46153846 C7.58461538,3.11538462 9.69538462,2.30769231
12,2.30769231 C14.3046154,2.30769231 16.4153846,3.11538462 18.0738462,4.46153846 Z M12,14.7246154 L7.95076923,6.61538462 L16.06,6.61538462
L12,14.7246154 Z M17.3846154,8.76923077 L17.3846154,17.3846154 L13.0769231,17.3846154 L17.3846154,8.76923077 Z M10.9230769,17.3846154
L6.61538462,17.3846154 L6.61538462,8.76923077 L10.9230769,17.3846154 Z M18.0738462,19.5384615 C16.4046154,20.8846154 14.2938462,21.6923077
12,21.6923077 C9.70615385,21.6923077 7.58461538,20.8846154 5.92615385,19.5384615 L18.0738462,19.5384615 Z M21.6923077,12 C21.6923077,14.3046154
20.8846154,16.4153846 19.5384615,18.0738462 L19.5384615,5.93692308 C20.8738462,7.60615385 21.6923077,9.70615385 21.6923077,12 Z" id="mdc-logo-path"></path>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-29.000000, -48.000000)">
<g>
<g transform="translate(0.000000, 44.000000)">
<g transform="translate(29.000000, 0.000000)">
<g transform="translate(0.000000, 4.000000)">
<mask fill="white">
<use xlink:href="#mdc-logo-path"></use>
</mask>
<use fill="#5F6367" fill-rule="nonzero" xlink:href="#mdc-logo-path"></use>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Material Theme Generator</h1>
<p class="mdc-typography--body2">Build a Material Design using CSS custom properties, or upload an image to generate a theme based on the image.</p>
<div class="button-bar">
<label for="file" class="mdc-button mdc-button--outlined">
<span class="mdc-button__label">Choose a File</span>
<i class="material-icons mdc-button__icon">add_a_photo</i>
</label>
<button class="mdc-button mdc-button--outlined save-css-button">
<span class="mdc-button__label">Download CSS</span>
<i class="material-icons mdc-button__icon">file_copy</i>
</button>
</div>
<div class="button-bar">
<button class="mdc-button mdc-button--raised save-button">
<span class="mdc-button__label">Remix to Save Theme</span>
<i class="material-icons mdc-button__icon">save</i>
</button>
</div>
<div class="image-source-container hidden">
<div class="source">
<input type="file" accept="image/*" id="file" onchange="loadFile(event)" class="inputfile">
<img id="source-image" />
</div>
</div>
<!-- Theme Summary -->
<hr class="mdc-list-divider theme-summary-divider">
<div class="mdc-drawer__content drawer-content--theme-summary" style="display: block;">
<div class="section-header">
<a href="https://material.io/design/color/the-color-system.html#tools-for-picking-colors" class="mdc-typography--overline" target="_blank">
<i class="material-icons leading-icon">colorize</i>
Color Scheme
<i class="material-icons">open_in_new</i>
</a>
<button class="mdc-icon-button material-icons randomize-colors">shuffle</button>
</div>
<div class="color-theme-summaries">
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--background">--mdc-theme-background<span class="varVal">: #ffffff;</span></code>
<input type="color" class="theme-summary-color theme-summary-color--background">
</div>
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--primary">--mdc-theme-primary<span class="varVal">: #6200ee;</span></code>
<input type="color" class="theme-summary-color theme-summary-color--primary">
</div>
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--on-primary">--mdc-theme-on-primary<span class="varVal">: #ffffff;</span></code><span class="contrast contrast-primary"></span>
<input type="color" class="theme-summary-color theme-summary-color--on-primary">
</div>
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--secondary">--mdc-theme-secondary<span class="varVal">: #018786;</span></code>
<input type="color" class="theme-summary-color theme-summary-color--secondary">
</div>
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--on-secondary">--mdc-theme-on-secondary<span class="varVal">: #ffffff;</span></code><span class="contrast contrast-secondary"></span>
<input type="color" class="theme-summary-color theme-summary-color--on-secondary">
</div>
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--error">--mdc-theme-error<span class="varVal">: #b00020;</span></code>
<input type="color" class="theme-summary-color theme-summary-color--error">
</div>
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--on-error">--mdc-theme-on-error<span class="varVal">: #ffffff;</span></code><span class="contrast contrast-error"></span>
<input type="color" class="theme-summary-color theme-summary-color--on-error">
</div>
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--surface">--mdc-theme-surface<span class="varVal">: #ffffff;</span></code>
<input type="color" class="theme-summary-color theme-summary-color--surface">
</div>
<div class="theme-summary-line">
<code class="theme-summary-code theme-summary-code--on-surface">--mdc-theme-on-surface<span class="varVal">: #000000;</span></code><span class="contrast contrast-surface"></span>
<input type="color" class="theme-summary-color theme-summary-color--on-surface">
</div>
</div>
<hr class="mdc-list-divider theme-summary-divider">
<!-- Shape -->
<div class="section-header">
<a href="https://material.io/design/shape/about-shape.html#shape-customization-tool" class="mdc-typography--overline" target="_blank">
<i class="material-icons leading-icon">border_style</i>
Shape System
<i class="material-icons">open_in_new</i>
</a>
<button class="mdc-icon-button material-icons randomize-shape">shuffle</button>
</div>
<div class="shape-theme-summaries">
<div class="theme-summary-line theme-shape">
<code class="theme-summary-code">--mdc-shape-small: <input class="varVal shapeVal" type="number" value="4"/>px;</code>
<figure class="theme-summary-shape theme-summary-shape--small"></figure>
</div>
<div class="theme-summary-line theme-shape">
<code class="theme-summary-code">--mdc-shape-medium: <input class="varVal shapeVal" type="number" value="4"/>px;</code>
<figure class="theme-summary-shape theme-summary-shape--medium"></figure>
</div>
<div class="theme-summary-line theme-shape">
<code class="theme-summary-code">--mdc-shape-large: <input class="varVal shapeVal" type="number" value="0"/>px;</code> <figure class="theme-summary-shape theme-summary-shape--large"></figure>
</div>
</div>
<hr class="mdc-list-divider theme-summary-divider">
<!-- Type -->
<div class="section-header">
<a href="https://material.io/design/typography/the-type-system.html" class="mdc-typography--overline" target="_blank">
<i class="material-icons leading-icon">text_fields</i>
Typography Scale
<i class="material-icons">open_in_new</i>
</a>
<button class="mdc-icon-button material-icons randomize-typeface">shuffle</button>
</div>
<div class="typography-callout">
<code class="theme-summary-code">--mdc-typography--font-family:
<span class="font-name varVal">Public Sans</span>;</code>
<a class="font-link mdc-typography--button" target="_blank" href="https://fonts.google.com/specimen/Public+Sans">See on Google Fonts <i class="material-icons">open_in_new</i></a>
</div>
<div class="type-demos">
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--headline1</code>
<figure class="theme-summary-typography mdc-typography--headline1">H1</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--headline2</code>
<figure class="theme-summary-typography mdc-typography--headline2">H2</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--headline3</code>
<figure class="theme-summary-typography mdc-typography--headline3">H3</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--headline4</code>
<figure class="theme-summary-typography mdc-typography--headline4">H4</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--headline5</code>
<figure class="theme-summary-typography mdc-typography--headline5">H5</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--headline6</code>
<figure class="theme-summary-typography mdc-typography--headline6">H6</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--subtitle1</code>
<figure class="theme-summary-typography mdc-typography--subtitle1">subtitle 1</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--subtitle2</code>
<figure class="theme-summary-typography mdc-typography--subtitle2">subtitle 2</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--body1</code>
<figure class="theme-summary-typography mdc-typography--body1">body 1</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--body2</code>
<figure class="theme-summary-typography mdc-typography--body2">body 2</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--button</code>
<figure class="theme-summary-typography mdc-typography--button">button</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--caption</code>
<figure class="theme-summary-typography mdc-typography--caption">caption</figure>
</div>
<div class="theme-summary-line theme-summary-line--typography">
<code class="theme-summary-code">--mdc-typography--overline</code>
<figure class="theme-summary-typography mdc-typography--overline">overline</figure>
</div>
</div>
</div>
</div>
<!-- Components Layout from Theme Builder -->
<main class="main-content mdc-top-app-bar--fixed-adjust">
<div class="column">
<!-- Button -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/buttons.html" class="mdc-typography--button" target="_blank">
Button
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper button-component-wrapper">
<button class="mdc-button mdc-button--raised mdc-ripple-upgraded">
Button
</button>
<button class="mdc-button mdc-ripple-upgraded">
Button
</button>
<button class="mdc-button mdc-button--outlined mdc-ripple-upgraded">
Button
</button>
</div>
</section>
<!-- Top app bar -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/app-bars-top.html" class="mdc-typography--button" target="_blank">
Top App Bar
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper top-bar-component-wrapper">
<header class="mdc-top-app-bar mdc-top-app-bar--fixed mdc-top-app-bar--fixed-scrolled">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a class="material-icons mdc-top-app-bar__navigation-icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded">menu</a>
<span class="mdc-top-app-bar__title">Headline 6</span>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a class="material-icons mdc-icon-button mdc-top-app-bar__action-item mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" aria-label="Share" alt="Share">share</a>
<a class="material-icons mdc-icon-button mdc-top-app-bar__action-item mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
<a class="material-icons mdc-icon-button mdc-top-app-bar__action-item mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" aria-label="Search this page" alt="Search this page">search</a>
</section>
</div>
</header>
</div>
</section>
<!-- Drawer -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/navigation-drawer.html" class="mdc-typography--button" target="_blank">
Drawer
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper drawer-component-wrapper">
<aside class="mdc-drawer">
<div class="mdc-drawer__header">
<h3 class="mdc-drawer__title">Headline 6</h3>
<h6 class="mdc-drawer__subtitle">Body 2</h6>
</div>
<hr class="mdc-list-divider">
<div class="mdc-drawer__content">
<nav class="mdc-list" role="listbox">
<a class="mdc-list-item mdc-list-item--activated mdc-ripple-upgraded" aria-selected="true" tabindex="-1">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">inbox</i>
<span class="mdc-list-item__text">Body 2</span>
</a>
<a class="mdc-list-item mdc-ripple-upgraded" tabindex="-1">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">star</i>
<span class="mdc-list-item__text">Body 2</span>
</a>
<a class="mdc-list-item mdc-ripple-upgraded" tabindex="-1">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">bookmark</i>
<span class="mdc-list-item__text">Body 2</span>
</a>
<a class="mdc-list-item mdc-ripple-upgraded" tabindex="-1">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">send</i>
<span class="mdc-list-item__text">Body 2</span>
</a>
<a class="mdc-list-item mdc-ripple-upgraded" tabindex="-1">
<i class="material-icons mdc-list-item__graphic" aria-hidden="true">drafts</i>
<span class="mdc-list-item__text">Body 2</span>
</a>
</nav>
</div>
</aside>
</div>
</section>
<div class="component-section-row">
<!-- Short top app bar -->
<section class="component-section short-app-bar-section">
<div class="section-header">
<a href="https://material.io/design/components/app-bars-top.html" class="mdc-typography--button" target="_blank">
Short App Bar
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<header class="mdc-top-app-bar mdc-top-app-bar--short mdc-top-app-bar--short-collapsed mdc-top-app-bar--short-has-action-item">
<div class="mdc-top-app-bar__row">
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
<a class="material-icons mdc-icon-button mdc-top-app-bar__navigation-icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" style="--mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">menu</a>
</section>
<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
<a class="material-icons mdc-icon-button mdc-top-app-bar__action-item mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" aria-label="Open shopping cart" alt="Open shopping cart" style="--mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:-2px; --mdc-ripple-top:10px;">shopping_cart</a>
</section>
</div>
</header>
</div>
</section>
<!-- Menu -->
<section class="component-section menu-section">
<div class="section-header">
<a href="https://material.io/design/components/menus.html" class="mdc-typography--button" target="_blank">
Menu
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<div class="mdc-menu-surface--anchor">
<div class="mdc-menu mdc-menu-surface mdc-menu-surface--open demo-menu" tabindex="-1" style="transform-origin: center bottom; left: 0px; bottom: 0px; max-height: 1066px;">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
<li class="mdc-list-item mdc-ripple-upgraded" role="menuitem" tabindex="-1">
<span class="mdc-list-item__text">Body 2</span>
</li>
<li class="mdc-list-item mdc-ripple-upgraded" role="menuitem" tabindex="-1">
<span class="mdc-list-item__text">Body 2</span>
</li>
<li class="mdc-list-item mdc-ripple-upgraded" role="menuitem" tabindex="-1">
<span class="mdc-list-item__text">Body 2</span>
</li>
<li class="mdc-list-item mdc-ripple-upgraded" role="menuitem" tabindex="-1">
<span class="mdc-list-item__text">Body 2</span>
</li>
</ul>
</div>
</div>
</div>
</section>
</div>
<!-- Linear progress -->
<section class="component-section linear-progress-section">
<div class="section-header">
<a href="https://material.io/design/components/progress-indicators.html#linear-progress-indicators" class="mdc-typography--button" target="_blank">
Linear Progress
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper linear-progress-component-wrapper">
<div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate">
<div class="mdc-linear-progress__buffering-dots"></div>
<div class="mdc-linear-progress__buffer"></div>
<div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
<span class="mdc-linear-progress__bar-inner"></span>
</div>
<div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
<span class="mdc-linear-progress__bar-inner"></span>
</div>
</div>
</div>
</section>
<div class="component-section-row switch-checkbox-row">
<!-- Switch -->
<section class="component-section switch-section">
<div class="section-header">
<a href="https://material.io/design/components/selection-controls.html#switches" class="mdc-typography--button" target="_blank">
Switch
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper switch-component-wrapper">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">
<div class="mdc-switch__thumb">
<input type="checkbox" id="basic-switch" class="mdc-switch__native-control" role="switch">
</div>
</div>
</div>
<div class="mdc-switch mdc-switch--checked">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">
<div class="mdc-switch__thumb">
<input type="checkbox" id="basic-switch-2" class="mdc-switch__native-control" role="switch" checked="">
</div>
</div>
</div>
</div>
</section>
<!-- Checkbox -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/selection-controls.html#checkboxes" class="mdc-typography--button" target="_blank">
Checkbox
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper checkbox-component-wrapper">
<div class="mdc-checkbox mdc-checkbox--upgraded mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input type="checkbox" class="mdc-checkbox__native-control">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<div class="mdc-checkbox indeterminate-checkbox mdc-checkbox--upgraded mdc-checkbox--selected mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input type="checkbox" class="mdc-checkbox__native-control" aria-checked="mixed">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<div class="mdc-checkbox mdc-checkbox--upgraded mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input type="checkbox" class="mdc-checkbox__native-control" checked="">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</div>
</section>
</div>
<div class="component-section-row radio-row">
<!-- Radio -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/selection-controls.html#radio-buttons" class="mdc-typography--button" target="_blank">
Radio Button
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper radio-component-wrapper">
<div class="mdc-radio mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input class="mdc-radio__native-control" type="radio" id="radio-1" name="radios" checked="">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
<div class="mdc-radio mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input class="mdc-radio__native-control" type="radio" id="radio-2" name="radios" checked="">
<div class="mdc-radio__background">
<div class="mdc-radio__outer-circle"></div>
<div class="mdc-radio__inner-circle"></div>
</div>
</div>
</div>
</section>
<!-- Icon button -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/buttons.html#toggle-button" class="mdc-typography--button" target="_blank">
Icon Button
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper icon-button-component-wrapper">
<button id="icon-toggle-button" class="mdc-icon-button mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" aria-label="Music off" aria-hidden="true" aria-pressed="false" style="--mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">
<i class="material-icons mdc-icon-button__icon mdc-icon-button__icon--on">music_off</i>
<i class="material-icons mdc-icon-button__icon">music_note</i>
</button>
</div>
</section>
</div>
<!-- Chips -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/chips.html" class="mdc-typography--button" target="_blank">
Chips
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper chips-component-wrapper chips-component-wrapper-1">
<div class="mdc-chip-set mdc-chip-set--choice">
<div class="mdc-chip mdc-chip--selected mdc-ripple-upgraded" tabindex="0" id="mdc-chip-1" aria-checked="true">
<div class="mdc-chip__text">Body 2</div>
</div>
<div class="mdc-chip mdc-ripple-upgraded" tabindex="0" id="mdc-chip-2">
<div class="mdc-chip__text">Body 2</div>
</div>
<div class="mdc-chip mdc-ripple-upgraded" tabindex="0" id="mdc-chip-3">
<div class="mdc-chip__text">Body 2</div>
</div>
</div>
</div>
<div class="component-wrapper chips-component-wrapper chips-component-wrapper-2">
<div class="mdc-chip-set mdc-chip-set--filter">
<div class="mdc-chip mdc-ripple-upgraded" id="mdc-chip-4">
<div class="mdc-chip__checkmark">
<svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
<path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
</div>
<div class="mdc-chip__text">Body 2</div>
</div>
<div class="mdc-chip mdc-chip--selected mdc-ripple-upgraded" id="mdc-chip-5" aria-checked="true">
<div class="mdc-chip__checkmark">
<svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
<path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
</div>
<div class="mdc-chip__text">Body 2</div>
</div>
<div class="mdc-chip mdc-chip--selected mdc-ripple-upgraded" id="mdc-chip-6" aria-checked="true">
<div class="mdc-chip__checkmark">
<svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
<path class="mdc-chip__checkmark-path" fill="none" stroke="black" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
</div>
<div class="mdc-chip__text">Body 2</div>
</div>
</div>
</div>
</section>
<div class="component-section-row">
<!-- Select -->
<section class="component-section select-component">
<div class="section-header">
<a href="https://material.io/develop/web/components/input-controls/select-menus/" class="mdc-typography--button" target="_blank">
Select
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<div class="mdc-select demo-width-class">
<input type="hidden" name="enhanced-select">
<i class="mdc-select__dropdown-icon"></i>
<div class="mdc-select__selected-text"></div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface demo-width-class">
<ul class="mdc-list">
<li class="mdc-list-item mdc-list-item--selected" data-value="" aria-selected="true"></li>
<li class="mdc-list-item" data-value="grains">
Grains
</li>
<li class="mdc-list-item" data-value="vegetables">
Vegetables
</li>
<li class="mdc-list-item" data-value="fruit">
Fruit
</li>
</ul>
</div>
<span class="mdc-floating-label">Pick a Food Group</span>
<div class="mdc-line-ripple"></div>
</div>
</section>
<!-- Select -->
<section class="component-section select-component">
<div class="section-header"><!-- Hold space for layout --></div>
<div class="component-wrapper">
<div class="mdc-select mdc-select--outlined custom-enhanced-select-width custom-select-outline-color">
<i class="mdc-select__dropdown-icon"></i>
<div id="screenshot-selected-text" class="mdc-select__selected-text" role="button" aria-haspopup="listbox"
aria-labelledby="screenshot-select-label screenshot-selected-text"></div>
<div class="mdc-select__menu mdc-menu mdc-menu-surface custom-enhanced-select-width" role="listbox">
<ul class="mdc-list">
<li class="mdc-list-item mdc-list-item--selected" aria-selected="true" data-value=""></li>
<li class="mdc-list-item" data-value="grains">
Grains
</li>
<li class="mdc-list-item" data-value="vegetables">
Vegetables
</li>
<li class="mdc-list-item" data-value="fruit">
Fruit
</li>
</ul>
</div>
<div class="mdc-notched-outline">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<span id="screenshot-select-label" class="mdc-floating-label">Pick a Food Group</span>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
</div>
</section>
</div>
<!-- List -->
<section class="component-section list-section">
<div class="section-header">
<a href="https://material.io/design/components/lists.html" class="mdc-typography--button" target="_blank">
List
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<ul class="mdc-list mdc-list--two-line mdc-list--avatar-list">
<li class="mdc-list-item mdc-ripple-upgraded" tabindex="0">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">child_care</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">Subtitle 1</span>
<span class="mdc-list-item__secondary-text">Body 2</span>
</span>
</li>
<hr class="mdc-list-divider">
<li class="mdc-list-item mdc-ripple-upgraded" tabindex="-1">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">child_care</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">Subtitle 1</span>
<span class="mdc-list-item__secondary-text">Body 2</span>
</span>
</li>
<hr class="mdc-list-divider">
<li class="mdc-list-item mdc-ripple-upgraded" tabindex="-1">
<span class="mdc-list-item__graphic material-icons" aria-hidden="true">child_care</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">Subtitle 1</span>
<span class="mdc-list-item__secondary-text">Body 2</span>
</span>
</li>
</ul>
</div>
</section>
<!-- Data Table -->
<section class="component-section data-table-section">
<div class="section-header">
<a href="https://material.io/design/components/data-tables.html" class="mdc-typography--button" target="_blank">
Data Table
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<div class="mdc-data-table">
<table class="mdc-data-table__table" aria-label="Dessert calories">
<thead>
<tr class="mdc-data-table__header-row">
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox" role="columnheader" scope="col">
<div class="mdc-checkbox mdc-checkbox--selected mdc-data-table__header-row-checkbox mdc-checkbox--upgraded mdc-checkbox--anim-unchecked-indeterminate mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input type="checkbox" class="mdc-checkbox__native-control" aria-label="Toggle all rows" aria-checked="mixed">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Dessert</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Carbs (g)</th>
<th class="mdc-data-table__header-cell" role="columnheader" scope="col">Protein (g)</th>
</tr>
</thead>
<tbody class="mdc-data-table__content">
<tr class="mdc-data-table__row" data-row-id="u0">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-data-table__row-checkbox mdc-checkbox--upgraded mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input type="checkbox" class="mdc-checkbox__native-control" aria-labelledby="r0">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td class="mdc-data-table__cell" id="r0">Froyo</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">24</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.0</td>
</tr>
<tr class="mdc-data-table__row mdc-data-table__row--selected" aria-selected="true" data-row-id="u1">
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox">
<div class="mdc-checkbox mdc-checkbox--selected mdc-data-table__row-checkbox mdc-checkbox--upgraded mdc-ripple-upgraded mdc-ripple-upgraded--unbounded" style="--mdc-ripple-fg-size:24px; --mdc-ripple-fg-scale:1.66667; --mdc-ripple-left:8px; --mdc-ripple-top:8px;">
<input type="checkbox" class="mdc-checkbox__native-control" checked="" aria-labelledby="r1">
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"></path>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
</td>
<td class="mdc-data-table__cell" id="r1">Eclair</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">37</td>
<td class="mdc-data-table__cell mdc-data-table__cell--numeric">4.3</td>
</tr>
</tbody>
</table>
</div>
</div>
</section></div>
<div class="column column-2">
<!-- FAB -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/buttons-floating-action-button.html" class="mdc-typography--button" target="_blank">
FAB
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper fab-component-wrapper">
<button class="mdc-fab mdc-fab--extended mdc-ripple-upgraded">
<span class="material-icons mdc-fab__icon">edit</span>
<span class="mdc-fab__label">Button</span>
</button>
<button class="mdc-fab mdc-ripple-upgraded" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
<button class="mdc-fab mdc-fab--mini mdc-ripple-upgraded" aria-label="Add">
<span class="mdc-fab__icon material-icons">add</span>
</button>
</div>
</section>
<!-- Card -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/cards.html" class="mdc-typography--button" target="_blank">
Card
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper card-component-wrapper">
<div class="mdc-card demo-card">
<div class="mdc-card__primary-action mdc-ripple-upgraded" tabindex="0">
<div class="mdc-card__media mdc-card__media--16-9 demo-card__media" style="background-image: url(&quot;https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png?1553629848209&quot;);"></div>
<div class="demo-card__primary">
<h3 class="demo-card__subtitle mdc-typography mdc-typography--overline">Overline</h3>
<h2 class="demo-card__title mdc-typography mdc-typography--headline6">Headline 6</h2>
</div>
<div class="demo-card__secondary mdc-typography mdc-typography--body2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
<div class="mdc-card__actions">
<div class="mdc-card__action-buttons">
<button class="mdc-button mdc-card__action mdc-card__action--button mdc-ripple-upgraded">Button</button>
<button class="mdc-button mdc-card__action mdc-card__action--button mdc-ripple-upgraded">Button</button>
</div>
</div>
</div>
</div>
</section>
<!-- Text field -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/text-fields.html" class="mdc-typography--button" target="_blank">
Text field
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper text-field-component-wrapper text-field-component-wrapper-1">
<div class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-trailing-icon">
<i class="material-icons mdc-text-field__icon">visibility</i>
<input class="mdc-text-field__input">
<div class="mdc-notched-outline mdc-notched-outline--upgraded">
<div class="mdc-notched-outline__leading"></div>
<div class="mdc-notched-outline__notch">
<label class="mdc-floating-label" style="">Label</label>
</div>
<div class="mdc-notched-outline__trailing"></div>
</div>
</div>
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">Assistive text</div>
</div>
</div>
<div class="component-wrapper text-field-component-wrapper text-field-component-wrapper-2">
<div class="mdc-text-field text-field-with-input mdc-ripple-upgraded">
<input class="mdc-text-field__input">
<div class="mdc-line-ripple"></div>
<label class="mdc-floating-label mdc-floating-label--float-above">Label</label>
</div>
<div class="mdc-text-field-helper-line">
<div class="mdc-text-field-helper-text mdc-text-field-helper-text--persistent">Assistive text</div>
</div>
</div>
</section>
<!-- Tabs -->
<section class="component-section tabs-section">
<div class="section-header">
<a href="https://material.io/design/components/tabs.html" class="mdc-typography--button" target="_blank">
Tabs
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<div class="mdc-tab-bar" role="tablist">
<div class="mdc-tab-scroller">
<div class="mdc-tab-scroller__scroll-area mdc-tab-scroller__scroll-area--scroll" style="margin-bottom: 0px;">
<div class="mdc-tab-scroller__scroll-content">
<button class="mdc-tab mdc-tab--active" role="tab" aria-selected="true" tabindex="0" id="mdc-tab-1">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Button</span>
</span>
<span class="mdc-tab-indicator mdc-tab-indicator--active">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0" id="mdc-tab-2">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Button</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple mdc-ripple-upgraded"></span>
</button>
<button class="mdc-tab" role="tab" aria-selected="true" tabindex="0" id="mdc-tab-3">
<span class="mdc-tab__content">
<span class="mdc-tab__text-label">Button</span>
</span>
<span class="mdc-tab-indicator">
<span class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
</span>
<span class="mdc-tab__ripple mdc-ripple-upgraded"></span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Slider -->
<section class="component-section">
<div class="section-header">
<a href="https://material.io/design/components/sliders.html" class="mdc-typography--button" target="_blank">
Slider
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<div class="mdc-slider mdc-slider--discrete mdc-slider--display-markers" tabindex="0" role="slider" aria-valuemin="1" aria-valuemax="10" aria-label="Select Value" aria-valuenow="5">
<div class="mdc-slider__track-container">
<div class="mdc-slider__track" style="transform: scaleX(0.444444);"></div>
<div class="mdc-slider__track-marker-container"><div class="mdc-slider__track-marker"></div><div class="mdc-slider__track-marker"></div><div class="mdc-slider__track-marker"></div><div class="mdc-slider__track-marker"></div><div class="mdc-slider__track-marker"></div><div class="mdc-slider__track-marker"></div><div class="mdc-slider__track-marker"></div><div class="mdc-slider__track-marker"></div><div class="mdc-slider__track-marker"></div></div>
</div>
<div class="mdc-slider__thumb-container" style="transform: translateX(168.889px) translateX(-50%);">
<div class="mdc-slider__pin">
<span class="mdc-slider__pin-value-marker"></span>
</div>
<svg class="mdc-slider__thumb" width="21" height="21">
<circle cx="10.5" cy="10.5" r="7.875"></circle>
</svg>
<div class="mdc-slider__focus-ring"></div>
</div>
</div>
</div>
</section>
<!-- Snackbar -->
<section class="component-section snackbar-section">
<div class="section-header">
<a href="https://material.io/design/components/snackbars.html" class="mdc-typography--button" target="_blank">
Snackbar
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<div class="mdc-snackbar mdc-snackbar--open">
<div class="mdc-snackbar__surface">
<div class="mdc-snackbar__label" role="status" aria-live="polite">
Marked as favorite.
</div>
</div>
</div>
</div>
</section>
<!-- Dialog -->
<section class="component-section dialog-component-section">
<div class="section-header">
<a href="https://material.io/design/components/dialogs.html" class="mdc-typography--button" target="_blank">
Dialog
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper dialog-component-wrapper">
<div class="mdc-dialog mdc-dialog--open" role="alertdialog" aria-modal="true" aria-labelledby="my-dialog-title" aria-describedby="my-dialog-content">
<div class="mdc-dialog__container">
<div class="mdc-dialog__surface">
<!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
<h2 class="mdc-dialog__title" id="my-dialog-title">Headline 6</h2>
<div class="mdc-dialog__content" id="my-dialog-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<footer class="mdc-dialog__actions">
<button type="button" class="mdc-button mdc-dialog__button mdc-ripple-upgraded" data-mdc-dialog-action="no">
<span class="mdc-button__label">Button</span>
</button>
<button type="button" class="mdc-button mdc-dialog__button mdc-ripple-upgraded" data-mdc-dialog-action="yes">
<span class="mdc-button__label">Button</span>
</button>
</footer>
</div>
</div>
<!-- Note scrim element has been removed for this stickersheet -->
<!-- <div class="mdc-dialog__scrim"></div> -->
</div>
</div>
</section>
<!-- Image List -->
<section class="component-section image-list-section">
<div class="section-header">
<a href="https://material.io/design/components/image-lists.html" class="mdc-typography--button" target="_blank">
Image List
<i class="material-icons">open_in_new</i>
</a>
</div>
<div class="component-wrapper">
<ul class="mdc-image-list mdc-image-list--masonry">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-portrait.png?1553629847850">
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png?1553629848209">
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-med.png?1553629847913">
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png?1553629848209">
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-portrait.png?1553629847850">
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="https://cdn.glitch.com/9c389208-b279-4e96-bcbc-e5f8712d8706%2Fplaceholder-landscape-short.png?1553629848209">
</li>
</ul>
</div>
</section>
</div>
</main>
</body>
<!-- Scripts for Color Picking -->
<script async src="https://cdnjs.cloudflare.com/ajax/libs/color-thief/2.3.0/color-thief.min.js"></script>
<!-- Material Components -->
<script src="https://septimien-material-theme.glitch.me/components.js"></script>
<!-- JSON file of fonts -->
<script async type="text/javascript" src="https://septimien-material-theme.glitch.me/fonts.js"></script>
<!-- Dynamically Load Web Fonts -->
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<!-- TinyColor for contrast ratio -->
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.4.1/tinycolor.min.js"></script>
<!-- App Logic -->
<script async src="https://septimien-material-theme.glitch.me/app.js"></script>
<!-- Analytics -->
</html>
Raw
main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
Raw
renderer.js
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
@MJefferson

MJefferson commented Dec 18, 2020

Copy link
Copy Markdown
Author

Hmm

@MJefferson

MJefferson commented Dec 18, 2020

Copy link
Copy Markdown
Author

?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment