Home Assistant Git Exporter

config/www/community/generic-remote-control-card/generic-remote-control-card.js

@@ -0,0 +1,106 @@
+ 
+function loadScript(remote_template){
+  if(window[`scriptLoaded_${remote_template}`]){
+    return;
+  }
+
+  var script = document.createElement("script");
+  script.src = `/hacsfiles/generic-remote-control-card/remotes/${remote_template}/remote-html.js`;
+  script.type = "text/javascript";
+  script.async = false;
+  document.head.appendChild(script); 
+  window[`scriptLoaded_${remote_template}`] = true;
+  
+}
+
+
+class GenericRemotControlCard extends HTMLElement {
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+  setConfig(config) {
+    loadScript(config.remote_template);
+    const root = this.shadowRoot;
+    if (root.lastChild) root.removeChild(root.lastChild);
+
+    const cardConfig = Object.assign({}, config);
+    this._config = cardConfig
+  }
+
+  
+  set hass(hass) {
+    
+
+  
+    const config = this._config;
+    
+    loadScript(config.remote_template);
+    
+    try{
+      const html = window[`getRemoteHtml_${config.remote_template}`](config);
+        const css = window[`getRemoteStyle_${config.remote_template}`](config);
+        
+        
+        const root = this.shadowRoot;
+        this._hass = hass;
+        // root.lastChild.hass = hass;
+   
+        const card = document.createElement('ha-card');
+        if(!this.content && window[`scriptLoaded_${config.remote_template}`]){
+             this.content = document.createElement('div');
+             const style = document.createElement('style');
+             style.textContent = css;
+             this.content.innerHTML = html;
+             card.appendChild(this.content);
+             card.appendChild(style);
+     
+             root.appendChild(card);
+             
+             this._bindButtons(card, this._hass, this._config);
+        }
+    
+    } catch(err){
+      console.log('waiting for remote load');
+      loadScript(config.remote_template);
+    }
+    
+  }
+  
+ 
+    
+  _bindButtons(card, hass, config){
+    var buttons =  card.getElementsByClassName(`myButton-${config.remote_template}`);
+    var i;
+    for (i = 0; i < buttons.length; i++) { 
+      let button = buttons[i]
+        button.addEventListener('click', function(source){
+          console.log(button.id);
+          let buttonData = getButtonData(button.id, config);
+          console.log(buttonData)
+          let domain = buttonData.call.split(".")[0]
+          let action = buttonData.call.split(".")[1]
+          hass.callService(domain,
+                            action, 
+                            buttonData.data
+                             );
+        });
+    }
+  }
+  
+  
+
+
+  getCardSize() {
+    return 3;
+  }
+  
+
+}
+
+ function getButtonData(buttonId, config){
+    return config.buttons[buttonId];
+  }
+
+customElements.define('generic-remote-control-card', GenericRemotControlCard);

config/www/community/generic-remote-control-card/remotes/android_custom_keyboard/remote-html.js

@@ -0,0 +1,231 @@
+//definition section
+var lineTable = [
+  ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
+  ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"],
+  ["A", "S", "D", "F", "G", "H", "J", "K", "L"],
+  ["Z", "X", "C", "V", "B", "N", "M", "BACKSPACE"],
+  ["COMMA", "SPACE", "DOTT", "ENTER"],
+];
+var noLetterKeys = [
+  [8, "BACKSPACE"],
+  [13, "ENTER"],
+  [20, "CAPSLOCK"],
+  [32, "SPACE"],
+  [188, "COMMA"],
+  [190, "DOTT"],
+];
+var linesNames = [
+  "firstLine",
+  "secondLine",
+  "thirdLine",
+  "fourthLine",
+  "fivethLine",
+];
+
+function getRemoteStyle_android_custom_keyboard(config) {
+  const template = config.remote_template;
+
+  return `
+ha-card{
+    	background-color:transparent;
+    	box-shadow:var(--paper-material-elevation-0_-_box-shadow);
+    }
+body {
+	margin: 0;
+	padding: 20px;
+	font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif
+}
+
+#remote-control-android_custom_keyboard {
+	position: relative;
+	width: 464px;
+	height: 244px
+}
+
+#remote-control-android_custom_keyboard h2 {
+	position: absolute;
+	left: -5000px
+}
+
+#remote-control-android_custom_keyboard div {
+	margin: 0;
+	padding: 0;
+	list-style-type: none
+}
+
+.container {
+	width: 464px;
+	margin: 0 auto
+}
+div.buttonsLine {
+	height: 50px;
+	width: 464px;
+	margin: 5px;
+}
+div.keyButton {
+	position: relative;
+	height: 90%;
+	width: 9.85%;
+	border-radius: 20%;
+	color: white;
+	text-align: center;
+	font-family: Arial;
+	font-size: 100%;
+	margin-left: 1%;
+	margin-right: 1%;
+	float: left;
+}
+div.specialCharsField {
+	position: absolute;
+	border-radius: 20%;
+	background: #222222;
+	display: none;
+}
+div.specialChar {
+	position: relative;
+	background: none;
+	color: white;
+	text-align: center;
+	font-family: Arial;
+	font-size: 100%;
+	margin: 2px;
+	padding: 3px;
+	float: left;
+}
+div.letter {
+	user-select: none;
+	cursor: default;
+	position: relative;
+	top: 30%;
+}
+div.specialChar:hover, .specialCharHover {
+	background: #969696;
+}
+div.keyButton:active, .keyButtonActive {
+	transform: translate(1px, 1px);
+}
+div#btn-1, #btn-2, #btn-3, #btn-4, #btn-5, #btn-6, #btn-7, #btn-8, #btn-9, #btn-0, #btn-Q, #btn-W, #btn-E, #btn-R, #btn-T, #btn-Y, #btn-U, #btn-I, #btn-O, #btn-P{
+	background: #333333;
+}
+div#btn-Z, #btn-X, #btn-C, #btn-V, #btn-B, #btn-N, #btn-M, #btn-COMMA, #btn-DOTT {
+	background: #333333;
+	left: 14.85%;
+}
+div#btn-A, #btn-S, #btn-D, #btn-F, #btn-G, #btn-H, #btn-J, #btn-K, #btn-L {
+	background: #333333;
+	left: 5%;
+}
+div#btn-BACKSPACE, #btn-ENTER {
+	background: #333333;
+	width: 14.85%;
+	border-radius: 12.3%;
+	left: 14.85%;
+}
+div#btn-SPACE {
+	background: #333333;
+	width: 49.85%;
+	border-radius: 4%;
+	left: 14.85%;
+}
+`;
+}
+
+function getRemoteHtml_android_custom_keyboard(config) {
+  const template = config.remote_template;
+  const base_url = `/hacsfiles/generic-remote-control-card/remotes/${template}/`;
+
+  var mainContainer = document.createElement("div");
+  mainContainer.setAttribute("class", "container");
+
+  var newDiv = document.createElement("div");
+  newDiv.setAttribute("style", "text-align:center");
+  mainContainer.appendChild(newDiv);
+
+  var newElement = document.createElement("h1");
+  newElement.innerHTML = config.name;
+  newDiv.appendChild(newElement);
+
+  var mainDiv = document.createElement("div");
+  mainDiv.setAttribute("id", "remote-control-android_custom_keyboard");
+  mainContainer.appendChild(mainDiv);
+
+  newElement = document.createElement("h2");
+  newElement.innerHTML = "Main navigation";
+  mainDiv.appendChild(newElement);
+
+  linesNames.forEach((itemId) => {
+    newDiv = document.createElement("div");
+    newDiv.setAttribute("id", itemId);
+    newDiv.setAttribute("class", "buttonsLine");
+    mainDiv.appendChild(newDiv);
+  });
+
+  var hyperlink = document.createElement("a");
+  hyperlink.setAttribute("id", "hyperlink");
+  hyperlink.setAttribute("href", "#");
+  hyperlink.setAttribute("title", "");
+  mainDiv.appendChild(hyperlink);
+
+  //all letters' buttons printing
+  lineTable.forEach((lineLetters, index) => {
+    lineLetters.forEach((item) => {
+      createDivWithContent(
+        linesNames[index],
+        "btn-" + String(item),
+        "keyButton",
+        "sub-" + String(item),
+        "letter",
+        getContent(item, true)
+      );
+    });
+  });
+
+  //creates Button with Key name as a content
+  function createDivWithContent(
+    parentId,
+    mainId,
+    mainClass,
+    subId,
+    subClass,
+    content
+  ) {
+    var parentObj = mainContainer.querySelector("#" + parentId);
+    if (parentObj != null) {
+      var newDiv = document.createElement("div");
+      newDiv.setAttribute("id", mainId);
+      newDiv.setAttribute("class", mainClass);
+      newDiv.classList.add("myButton-" + String(template));
+      if (subId != null && subId != "") {
+        var subDiv = document.createElement("div");
+        subDiv.setAttribute("id", subId);
+        subDiv.setAttribute("class", "letter");
+        subDiv.appendChild(content);
+        newDiv.appendChild(subDiv);
+      } else newDiv.appendChild(content);
+      parentObj.appendChild(newDiv);
+    } else
+      console.log(
+        "createDivWithContent function couldn't create new div, because parent object with ID: " +
+          String(parentId) +
+          " doesn't exist."
+      );
+  }
+
+  function getContent(item, condition) {
+    if (item === "BACKSPACE") {
+      var content = document.createElement("img");
+      content.setAttribute("src", base_url + "icn-backspace.png");
+    } else if (item === "COMMA") var content = document.createTextNode(",");
+    else if (item === "SPACE") var content = document.createTextNode(" ");
+    else if (item === "DOTT") var content = document.createTextNode(".");
+    else if (item === "ENTER") {
+      var content = document.createElement("img");
+      content.setAttribute("src", base_url + "icn-enter.png");
+    } else
+      var content = document.createTextNode(
+        condition ? String(item).toUpperCase() : String(item).toLowerCase()
+      );
+    return content;
+  }
+  return mainContainer.outerHTML;
+}

config/www/community/generic-remote-control-card/remotes/apple4kremote/remote-html.js

@@ -0,0 +1,211 @@
+function getRemoteStyle_apple4kremote(config) {
+   const template = config.remote_template;
+   const base_url = `/hacsfiles/generic-remote-control-card/remotes/${template}`;
+   
+  return `
+    ha-card{
+    	background-color:transparent;
+    	box-shadow:var(--paper-material-elevation-0_-_box-shadow);
+    }
+    body {
+	margin: 0;
+	padding: 20px;
+	font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif
+}
+
+.container {
+	width: 360px;
+	margin: 0 auto
+}
+
+#remote-control-apple4kremote {
+	position: relative;
+	background: url(${base_url}/apple4kremote.png) no-repeat;
+	width: 349px;
+	height: 930px;
+	margin: auto;
+}
+
+#remote-control-apple4kremote ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: none
+}
+
+#up a,
+#left a,
+#select a,
+#right a,
+#down a,
+#menu a,
+#tv a,
+#siri a,
+#volup a,
+#play a,
+#voldown a {
+	position: absolute;
+	display: block
+}
+
+#remote-control-apple4kremote li#up a {
+    left: 124px;
+    top: 51px;
+    width: 101px;
+    height: 53px;	
+	background: url(${base_url}/up.png) no-repeat
+}
+
+#remote-control-apple4kremote li#left a {
+    left: 56px;
+    top: 106px;
+    width: 53px;
+    height: 101px;	
+	background: url(${base_url}/left.png) no-repeat
+}
+
+#remote-control-apple4kremote li#select a {
+    left: 121px;
+    top: 111px;
+    width: 104px;
+    height: 103px;	
+	background: url(${base_url}/select.png) no-repeat
+}
+
+#remote-control-apple4kremote li#right a {
+    left: 245px;
+    top: 106px;
+    width: 53px;
+    height: 101px;	
+	background: url(${base_url}/right.png) no-repeat
+}
+
+#remote-control-apple4kremote li#down a {
+    left: 124px;
+    top: 230px;
+    width: 101px;
+    height: 53px;	
+	background: url(${base_url}/down.png) no-repeat
+}
+
+#remote-control-apple4kremote li#menu a {
+    left: 63px;
+    top: 295px;
+    width: 101px;
+    height: 102px;	
+	background: url(${base_url}/menu.png) no-repeat
+}
+
+#remote-control-apple4kremote li#tv a {
+    left: 186px;
+    top: 295px;
+    width: 101px;
+    height: 102px;	
+	background: url(${base_url}/tv.png) no-repeat
+}
+
+#remote-control-apple4kremote li#siri a {
+    left: 63px;
+    top: 415px;
+    width: 100px;
+    height: 102px;	
+	background: url(${base_url}/siri.png) no-repeat
+}
+
+#remote-control-apple4kremote li#volup a {
+    left: 191px;
+    top: 417px;
+    width: 92px;
+    height: 101px;	
+	background: url(${base_url}/volup.png) no-repeat
+}
+
+#remote-control-apple4kremote li#play a {
+    left: 63px;
+    top: 536px;
+    width: 100px;
+    height: 100px;	
+	background: url(${base_url}/play.png) no-repeat
+}
+
+#remote-control-apple4kremote li#voldown a {
+    left: 191px;
+    top: 534px;
+    width: 92px;
+    height: 100px;	
+	background: url(${base_url}/voldown.png) no-repeat
+}
+
+
+#remote-control-apple4kremote li#up a:hover {
+	background: url(${base_url}/up_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#left a:hover {
+	background: url(${base_url}/left_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#select a:hover {
+	background: url(${base_url}/select_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#right a:hover {
+	background: url(${base_url}/right_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#down a:hover {
+	background: url(${base_url}/down_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#menu a:hover {
+	background: url(${base_url}/menu_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-apple4kremote li#tv a:hover {
+	background: url(${base_url}/tv_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-apple4kremote li#siri a:hover {
+	background: url(${base_url}/siri_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-apple4kremote li#volup a:hover {
+	background: url(${base_url}/volup_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#play a:hover {
+	background: url(${base_url}/play_over.png) no-repeat 0px 0px
+}
+
+#remote-control-apple4kremote li#voldown a:hover {
+	background: url(${base_url}/voldown_over.png) no-repeat 0px 0px
+}  
+  `;
+}
+
+function getRemoteHtml_apple4kremote(config){
+ const template = config.remote_template;
+ return `
+
+ <div class="container">
+            <div style="text-align:center">
+			<h1>${config.name}</h1>
+			</div>
+			<div id="remote-control-apple4kremote">
+				<ul>
+					<li id="up" class="myButton-${template}"><a href="#" title="up"></a></li>
+					<li id="left" class="myButton-${template}"><a href="#" title="left"></a></li>
+					<li id="select" class="myButton-${template}"><a href="#" title="select"></a></li>
+					<li id="right" class="myButton-${template}"><a href="#" title="right"></a></li>
+					<li id="down" class="myButton-${template}"><a href="#" title="down"></a></li>
+					<li id="menu" class="myButton-${template}"><a href="#" title="menu"</a></li>
+					<li id="tv" class="myButton-${template}"><a href="#" title="tv"></a></li>
+					<li id="siri" class="myButton-${template}"><a href="#" title="siri"></a></li>
+					<li id="volup" class="myButton-${template}"><a href="#" title="volup"></a></li>
+					<li id="play" class="myButton-${template}"><a href="#" title="play"></a></li>
+					<li id="voldown" class="myButton-${template}"><a href="#" title="voldown"></a></li>			
+				</ul>
+			</div>	
+		</div>
+
+`;
+}

config/www/community/generic-remote-control-card/remotes/ccwgtv/remote-html.js

@@ -0,0 +1,229 @@
+function getRemoteStyle_ccwgtv(config) {
+
+    const template = config.remote_template;
+    const base_url = `/hacsfiles/generic-remote-control-card/remotes/${template}`;
+
+    return `
+        ha-card{
+            background-color:transparent;
+            box-shadow:var(--paper-material-elevation-0_-_box-shadow);
+        }
+        
+        body {
+            margin: 0;
+            padding: 20px;
+            font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
+        }
+        
+        .container {
+            width: 224px;
+            margin: 0 auto
+        }
+        
+        #remote-control-ccwgtv {
+            position: relative;
+            background: url(${base_url}/remote.png) no-repeat;
+            width: 178px;
+            height: 559px;
+        }
+        
+        span {
+            display: none;
+        }
+        
+        li {
+            display: inline-block;
+        }
+        
+        ul a {
+            display: inline-block;
+            position: absolute;
+            width: 29px;
+            height: 29px;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: contain;
+            border-radius: 50%;
+            transition: opacity 0.3s ease-in-out;
+        }
+        
+        ul a:hover,
+        ul a:focus,
+        ul a:active {
+            opacity: 0.3;
+        }
+        
+        #remote-control-ccwgtv ul {
+            margin: 0;
+            padding: 0;
+            list-style-type: none;
+        }
+        
+        #top a {
+            top: 15px;
+            background-image: url(${base_url}/top.png);
+        }
+        
+        #bottom a,
+        #ok a,
+        #top a {
+            left: 68px;
+        }
+        
+        #bottom a {
+            top: 117px;
+            background-image: url(${base_url}/bottom.png);
+        }
+        
+        
+        #clickleft a,
+        #clickright a,
+        #ok a {
+            top: 63px;
+        }
+        
+        #ok a {
+            background-image: url(${base_url}/ok.png);
+        }
+        
+        #clickleft a {
+            left: 18px;
+            background-image: url(${base_url}/clickleft.png);
+        }
+        
+        #clickright a {
+            left: 119px;
+            background-image: url(${base_url}/clickright.png);
+        }
+        
+        #back a {
+            left: 27px;
+            top: 174px;
+            width: 26px;
+            background-image: url(${base_url}/go_back.png);
+        }
+        
+        #assistant a {
+            left: 107px;
+            top: 167px;
+            width: 39px;
+            height: 41px;
+            background-image: url(${base_url}/assistant.png);
+        }
+        
+        
+        #home a,
+        #mute a {
+            top: 240px;
+            width: 26px;
+            height: 41px;
+        }
+        
+        #home a {
+            left: 30px;
+            background-image: url(${base_url}/home.png);
+        }
+        
+        #mute a {
+            left: 113px;
+            background-image: url(${base_url}/mute.png);
+        }
+        
+        #youtube a,
+        #netflix a {
+            top: 313px;
+            width: 45px;
+            height: 41px;
+        }
+        
+        #youtube a {
+            left: 20px;
+            background-image: url(${base_url}/youtube.png);
+        }
+        
+        #netflix a {
+            left: 109px;
+            background-image: url(${base_url}/netflix.png);
+        }
+        
+        
+        #power a,
+        #source a {
+            top: 388px;
+            transform: scale(0.8);
+        }
+        
+        #power a {
+            left: 30px;
+            background-image: url(${base_url}/power.png);
+        }
+        
+        #source a {
+            left: 118px;
+            background-image: url(${base_url}/source.png);
+        }
+        
+        .audio-controls {
+            position: absolute;
+            left: 168px;
+            top: 100px;
+            width: 40px;
+            background: #b8b7b1;
+            border-radius: 0;
+            border-top-right-radius: 14px;
+            border-bottom-right-radius: 14px;
+            height: 70px;
+            transform: rotate(-1.5deg);
+        }
+        
+        #volumeup a,
+        #volumedown a {
+            left: 5.5px;
+            width: 25px;
+        }
+        
+        #volumeup a {
+            top: 5px;
+            background-image: url(${base_url}/volume.png);
+        }
+        
+        #volumedown a {
+            bottom: 5px;
+            background-image: url(${base_url}/volumedown.png);
+        }
+    `;
+}
+
+function getRemoteHtml_ccwgtv(config){
+    const template = config.remote_template;
+
+    return `
+        <div class="container">
+            <div style="text-align:center">
+			<h1>${config.name}</h1>
+			</div>
+			<div id="remote-control-ccwgtv">
+				<ul>
+					<li id="power" class="myButton-${template}"><a href="#" title="Power"><span>Power</span></a></li>
+					<li id="assistant" class="myButton-${template}"><a href="#" title="assistant"><span>assistant</span></a></li>
+					<li id="home" class="myButton-${template}"><a href="#" title="home"><span>home</span></a></li>
+					<li id="back" class="myButton-${template}"><a href="#" title="Go back to beginning"><span>back</span></a></li>
+					<li id="mute" class="myButton-${template}"><a href="#" title="Mute"><span>mute</span></a></li>
+					<li id="youtube" class="myButton-${template}"><a href="#" title="Start Youtube"><span>youtube</span></a></li>
+					<li id="netflix" class="myButton-${template}"><a href="#" title="Start Netflix"><span>netflix</span></a></li>
+					<li id="source" class="myButton-${template}"><a href="#" title="Select Input Source"><span>source</span></a></li>
+					<li id="clickleft" class="myButton-${template}"><a href="#" title="clickleft"><span>clickleft</span></a></li>
+					<li id="clickright" class="myButton-${template}"><a href="#" title="clickright"><span>clickright</span></a></li>
+					<li class="myButton-${template}" id="back"><a href="#" title="Go back to beginning"><span>back</span></a></li>
+					<li class="myButton-${template}" id="top"><a href="#" title="Top of gallery"><span>Top of Gallery</span></a></li>
+					<li class="myButton-${template}" id="bottom"><a href="#" title="Bottom of gallery"><span>Bottom of Gallery</span></a></li>
+					<li class="myButton-${template}" id="ok"><a href="#" title="OK - start slideshow"><span>OK - start slideshow</span></a></li>
+				</ul>
+				<ul class="audio-controls">
+				    <li id="volumeup" class="myButton-${template}"><a href="#" title="volume"><span>volume</span></a></li>
+					<li id="volumedown" class="myButton-${template}"><a href="#" title="volumedown"><span>volumedown</span></a></li>
+                </ul>
+			</div>	
+		</div>
+    `;
+}

config/www/community/generic-remote-control-card/remotes/edifier_rc600a/remote-html.js

@@ -0,0 +1,240 @@
+function getRemoteStyle_edifier_rc600a(config) {
+   const template = config.remote_template;
+   const base_url = `/hacsfiles/generic-remote-control-card/remotes/${template}`;    
+    
+  return `
+  ha-card{
+    	background-color:transparent;
+    	box-shadow:var(--paper-material-elevation-0_-_box-shadow);
+    }
+body {
+	margin: 0;
+	padding: 20px;
+	font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif
+}
+
+.container {
+	width: 492px;
+	margin: 0 auto
+}
+
+#remote-control-edifier_rc600a {
+	position: relative;
+	background: url(${base_url}/remote-background.png) no-repeat;
+	width: 492px;
+	height: 517px
+}
+
+#remote-control-edifier_rc600a h2,
+#remote-control-edifier_rc600a span {
+	position: absolute;
+	left: -5000px
+}
+
+#remote-control-edifier_rc600a div {
+	margin: 0;
+	padding: 0;
+	list-style-type: none
+}
+
+#power a,
+#opt a,
+#pc a,
+#cox a,
+#aux a,
+#bluetooth a,
+#volumeup a,
+#volumedown a,
+#previous a,
+#next a,
+#play a {
+	position: absolute;
+	display: block
+}
+
+#remote-control-edifier_rc600a div#power a {
+	left: 234px;
+	bottom: 396px;
+	width: 17px;
+	height: 20px;
+	background: url(${base_url}/btn-power.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#power a:hover {
+	background-image: url(${base_url}/btn-power_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+#remote-control-edifier_rc600a div#opt a {
+	left: 105px;
+	bottom: 296px;
+	width: 27px;
+	height: 38px;
+	background: url(${base_url}/btn-opt.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#opt a:hover {
+	background-image: url(${base_url}/btn-opt_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+#remote-control-edifier_rc600a div#pc a {
+	left: 358px;
+	bottom: 305px;
+	width: 22px;
+	height: 27px;
+	background: url(${base_url}/btn-pc.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#pc a:hover {
+	background-image: url(${base_url}/btn-pc_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+
+#remote-control-edifier_rc600a div#cox a {
+	left: 107px;
+	bottom: 188px;
+	width: 25px;
+	height: 40px;
+	background: url(${base_url}/btn-cox.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#cox a:hover {
+	background-image: url(${base_url}/btn-cox_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+#remote-control-edifier_rc600a div#aux a {
+	left: 357px;
+	bottom: 190px;
+	width: 25px;
+	height: 41px;
+	background: url(${base_url}/btn-aux.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#aux a:hover {
+	background-image: url(${base_url}/btn-aux_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+
+#remote-control-edifier_rc600a div#bluetooth a {
+	left: 237px;
+	bottom: 114px;
+	width: 15px;
+	height: 20px;
+	background: url(${base_url}/btn-bluetooth.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#bluetooth a:hover {
+	background-image: url(${base_url}/btn-bluetooth_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+#remote-control-edifier_rc600a div#volumeup a {
+	left: 233px;
+	bottom: 326px;
+	width: 21px;
+	height: 21px;
+	background: url(${base_url}/btn-vol-up.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#volumeup a:hover {
+	background-image: url(${base_url}/btn-vol-up_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+#remote-control-edifier_rc600a div#volumedown a {
+	left: 234px;	
+	bottom: 187px;
+	width: 20px;
+	height: 7px;	
+	background: url(${base_url}/btn-vol-down.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#volumedown a:hover {
+	background-image: url(${base_url}/btn-vol-down_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+#remote-control-edifier_rc600a div#previous a {
+	left: 160px;
+	bottom: 253px;
+	width: 27px;
+	height: 18px;
+	background: url(${base_url}/btn-previous.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#previous a:hover {
+	background-image: url(${base_url}/btn-previous_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+#remote-control-edifier_rc600a div#next a {
+	left: 300px;
+	bottom: 255px;
+	width: 27px;
+	height: 18px;
+	background: url(${base_url}/btn-next.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#next a:hover {
+	background-image: url(${base_url}/btn-next_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+
+#remote-control-edifier_rc600a div#play a {
+	left: 232px;
+	bottom: 255px;
+	width: 23px;
+	height: 18px;
+	background: url(${base_url}/btn-play.png) no-repeat
+}
+
+#remote-control-edifier_rc600a div#play a:hover {
+	background-image: url(${base_url}/btn-play_over.png);
+	background-repeat: no-repeat;
+	background-position: 0 0px
+}
+  `;
+}
+
+function getRemoteHtml_edifier_rc600a(config){
+ const template = config.remote_template;
+ return `
+	<div class="container">
+		<div style="text-align:center">
+		<h1>${config.name}</h1>
+		</div>
+		<div id="remote-control-edifier_rc600a">
+			<h2>
+				Main navigation
+			</h2>
+			<div id="power" class="myButton-${template}"><a href="#" title="Power"><span>Power</span></a></div>
+			<div id="opt" class="myButton-${template}"><a href="#" title="OPT"><span>OPT</span></a></div>
+			<div id="pc" class="myButton-${template}"><a href="#" title="PC"><span>PC</span></a></div>
+			<div id="cox" class="myButton-${template}"><a href="#" title="COX"><span>COX</span></a></div>
+			<div id="aux" class="myButton-${template}"><a href="#" title="AUX"><span>AUX</span></a></div>
+			<div id="bluetooth" class="myButton-${template}"><a href="#" title="Bluetooth"><span>Bluetooth</span></a></div>
+			
+			<div id="volumeup" class="myButton-${template}"><a href="#" title="Volume Up"><span>Volume Up</span></a></div>
+			<div id="volumedown" class="myButton-${template}"><a href="#" title="Volume Down"><span>Volume Down</span></a></div>
+			<div id="previous" class="myButton-${template}"><a href="#" title="Previous"><span>Previous</span></a></div>
+			<div id="next" class="myButton-${template}"><a href="#" title="Next"><span>Next</span></a></div>
+			
+			<div id="play" class="myButton-${template}"><a href="#" title="Play"><span>Play</span></a></div>
+		</div>
+	</div>
+`;
+}

config/www/community/generic-remote-control-card/remotes/firestick4kremote/remote-html.js

@@ -0,0 +1,289 @@
+function getRemoteStyle_firestick4kremote(config) {
+   const template = config.remote_template;
+   const base_url = `/hacsfiles/generic-remote-control-card/remotes/${template}`;
+   
+  return `
+    ha-card{
+    	background-color:transparent;
+    	box-shadow:var(--paper-material-elevation-0_-_box-shadow);
+    }
+    body {
+	margin: 0;
+	padding: 20px;
+	font-family: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif
+}
+
+.container {
+	width: 360px;
+	margin: 0 auto
+}
+
+#remote-control-firestick4kremote {
+	position: relative;
+	background: url(${base_url}/firestick4kremote.png) no-repeat;
+	width: 332px;
+	height: 768px
+}
+
+#remote-control-firestick4kremote h2,
+#remote-control-firestick4kremote span {
+	position: absolute;
+	left: 5000px
+}
+
+#remote-control-firestick4kremote ul {
+	margin: 0;
+	padding: 0;
+	list-style-type: none
+}
+
+#pwr a,
+#mic a,
+#volup a,
+#voldown a,
+#mute a,
+#up a,
+#left a,
+#select a,
+#right a,
+#down a,
+#back a,
+#home a,
+#menu a,
+#rwd a,
+#play a,
+#fwd a {
+	position: absolute;
+	disrwd: block
+}
+
+#remote-control-firestick4kremote li#pwr a {
+    left: 86px;
+    top: 27px;
+    width: 36px;
+    height: 36px;	
+	background: url(${base_url}/pwr.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#mic a {
+    left: 140px;
+    top: 68px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/mic.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#volup a {
+    left: 140px;
+    top: 428px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/volup.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#voldown a {
+    left: 140px;
+    top: 485px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/voldown.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#mute a {
+    left: 140px;
+    top: 548px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/mute.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#up a {
+    left: 120px;
+    top: 129px;
+    width: 89px;
+    height: 42px;	
+	background: url(${base_url}/up.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#left a {
+    left: 78px;
+    top: 169px;
+    width: 42px;
+    height: 89px;	
+	background: url(${base_url}/left.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#select a {
+    left: 134px;
+    top: 183px;
+    width: 63px;
+    height: 63px;	
+	background: url(${base_url}/select.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#right a {
+    left: 210px;
+    top: 169px;
+    width: 42px;
+    height: 89px;	
+	background: url(${base_url}/right.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#down a {
+    left: 120px;
+    top: 256px;
+    width: 89px;
+    height: 42px;	
+	background: url(${base_url}/down.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#back a {
+    left: 80px;
+    top: 308px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/back.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#home a {
+    left: 140px;
+    top: 308px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/home.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#menu a {
+    left: 200px;
+    top: 308px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/menu.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#rwd a {
+    left: 80px;
+    top: 367px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/rwd.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#play a {
+    left: 140px;
+    top: 367px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/play.png) no-repeat
+}
+
+#remote-control-firestick4kremote li#fwd a {
+    left: 200px;
+    top: 367px;
+    width: 49px;
+    height: 49px;	
+	background: url(${base_url}/fwd.png) no-repeat
+}
+
+
+#remote-control-firestick4kremote li#pwr a:hover {
+	background: url(${base_url}/pwr_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#mic a:hover {
+	background: url(${base_url}/mic_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#volup a:hover {
+	background: url(${base_url}/volup_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#voldown a:hover {
+	background: url(${base_url}/voldown_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#mute a:hover {
+	background: url(${base_url}/mute_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#up a:hover {
+	background: url(${base_url}/up_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#left a:hover {
+	background: url(${base_url}/left_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#select a:hover {
+	background: url(${base_url}/select_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#right a:hover {
+	background: url(${base_url}/right_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#down a:hover {
+	background: url(${base_url}/down_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#back a:hover {
+	background: url(${base_url}/back_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-firestick4kremote li#home a:hover {
+	background: url(${base_url}/home_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-firestick4kremote li#menu a:hover {
+	background: url(${base_url}/menu_over.png) no-repeat 0px 0px
+}  
+
+#remote-control-firestick4kremote li#rwd a:hover {
+	background: url(${base_url}/rwd_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#play a:hover {
+	background: url(${base_url}/play_over.png) no-repeat 0px 0px
+}
+
+#remote-control-firestick4kremote li#fwd a:hover {
+	background: url(${base_url}/fwd_over.png) no-repeat 0px 0px
+}  
+  `;
+}
+
+function getRemoteHtml_firestick4kremote(config){
+ const template = config.remote_template;
+ return `
+
+ <div class="container">
+            <div style="text-align:center">
+			<h1>${config.name}</h1>
+			</div>
+			<div id="remote-control-firestick4kremote">
+				<h2>
+					Main navigation
+				</h2>
+				<ul>
+					<li id="pwr" class="myButton-${template}"><a href="#" title="pwr"><span>pwr</span></a></li>
+					<li id="mic" class="myButton-${template}"><a href="#" title="mic"><span>mic</span></a></li>
+					<li id="volup" class="myButton-${template}"><a href="#" title="volup"><span>volup</span></a></li>
+					<li id="voldown" class="myButton-${template}"><a href="#" title="voldown"><span>voldown</span></a></li>
+					<li id="mute" class="myButton-${template}"><a href="#" title="mute"><span>mute</span></a></li>
+					<li id="up" class="myButton-${template}"><a href="#" title="up"><span>up</span></a></li>
+					<li id="left" class="myButton-${template}"><a href="#" title="left"><span>left</span></a></li>
+					<li id="select" class="myButton-${template}"><a href="#" title="select"><span>select</span></a></li>
+					<li id="right" class="myButton-${template}"><a href="#" title="right"><span>right</span></a></li>
+					<li id="down" class="myButton-${template}"><a href="#" title="down"><span>down</span></a></li>
+					<li id="back" class="myButton-${template}"><a href="#" title="back"><span>back</span></a></li>
+					<li id="home" class="myButton-${template}"><a href="#" title="home"><span>home</span></a></li>
+					<li id="menu" class="myButton-${template}"><a href="#" title="menu"><span>menu</span></a></li>
+					<li id="rwd" class="myButton-${template}"><a href="#" title="rwd"><span>rwd</span></a></li>
+					<li id="play" class="myButton-${template}"><a href="#" title="play"><span>play</span></a></li>
+					<li id="fwd" class="myButton-${template}"><a href="#" title="fwd"><span>fwd</span></a></li>			
+				</ul>
+			</div>	
+		</div>
+
+`;
+}