Merged PR 63756: Playground Banner - for research panel

Playground Banner added to help find research panelists

Ref link: https://www.usertesting.com/panels/7wZ4nzGa/join?RID=Playground

Text was written with Linda.

![a.png](https://powerbi.visualstudio.com/4c7b5adb-c2d0-4f18-b23c-edc4ac30f4e1/_apis/git/repositories/1dd63332-e003-46a3-ac6f-70213a1bcc2e/pullRequests/63756/attachments/a.png)

Author: Amit Shuster

demo/v2-demo/sample.html

@@ -1,3 +1,7 @@
+<div id="playground-banner" onclick="openBannerLink();">
+    <p id="playground-banner-text">Influence the future of Power BI Embedded by joining our research panel.&nbsp;</p><p id="playground-banner-text-underlined">Sign up now!</p>
+    <img id="playground-banner-close" src="images\close.png" onclick="closeBanner();"/>
+</div>
 <div id="steps-nav-bar">
     <div id="steps-ul-dev">
         <ul id="steps-ul" class="steps-ul">
@@ -28,4 +32,19 @@ <h3>Welcome to the Power BI Embedded Playground</h3>
 </div>
 
 <div id="mainContent">
-</div>
+</div>
+
+<script>
+    var showBanner = true;
+    function closeBanner() {
+        showBanner = false;
+        $("#playground-banner").hide();
+    }
+
+    function openBannerLink() {
+        if (!showBanner)
+            return;
+        
+        window.open("https://www.usertesting.com/panels/7wZ4nzGa/join?RID=Playground", '_blank');
+    }
+</script>

demo/v2-demo/scripts/report.js

@@ -30,6 +30,9 @@ function OpenSamplesStep() {
     $("#embed-and-interact-steps-wrapper").hide();
 
     $("#welcome-text").show();
+    
+    if (window.innerWidth > 540)
+        $("#playground-banner").show();
 
     trackEvent(TelemetryEventName.InnerSectionOpen, { section: TelemetryInnerSection.Sample, src: TelemetryEventSource.UserClick });
 }
@@ -55,6 +58,7 @@ function OpenCodeStep(mode, entityType, tokenType) {
     $("#embed-and-interact-steps-wrapper").show();
 
     $("#welcome-text").hide();
+    $("#playground-banner").hide();
 
     $("#highlighter").empty();
 

demo/v2-demo/style/style.css

@@ -1862,4 +1862,54 @@ input:checked + .slider.round {
   right: calc(50% - 60px);
   position: absolute;
   font-size: 14px;
+}
+
+/* Playground Banner */
+
+#playground-banner {
+    height: 48px;
+    text-align: center;
+    background-color: #F2C811;
+    padding: 12px;
+    border-bottom: solid 1px #F1F1F1;
+    cursor: pointer;
+}
+
+#playground-banner:hover {
+    background-color: #ddb612;
+}
+
+#playground-banner-text, #playground-banner-text-underlined {
+    font-size: 16px;
+    font-weight: 600;
+    display: inline-block;
+}
+
+#playground-banner-text-underlined {
+    text-decoration: underline;
+}
+
+#playground-banner-close {
+    float: right;
+    margin-top: 4px;
+    margin-right: 8px;
+}
+
+@media only screen and (max-width: 675px) {
+    #playground-banner-text-underlined {
+        display: none;
+    }
+}
+
+
+@media only screen and (max-width: 605px) {
+    #playground-banner-text {
+        font-size: 14px;
+    }
+}
+
+@media only screen and (max-width: 540px) {
+    #playground-banner {
+        display: none;
+    }
 }