Skip to content

Modernize UI for server side examples and differentiate tables #137

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
eiman-eltigani-ttd merged 8 commits into from
Dec 9, 2025
Merged

Modernize UI for server side examples and differentiate tables #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
98ceba7
consolidate all html files into one and update ui
eiman-eltigani-ttd Dec 2, 2025
945fef5
update secure signals server side ui and consilidate pages
eiman-eltigani-ttd Dec 2, 2025
8d15659
seperate table and data for uid2 and google secure information
eiman-eltigani-ttd Dec 3, 2025
3d48ce9
seperate tables for google secure signal and prebid
eiman-eltigani-ttd Dec 4, 2025
ffde949
Merge main into branch, resolve conflicts keeping branch version
eiman-eltigani-ttd Dec 4, 2025
b93c457
update minor prebid secure big and fix ui spacing accross prebid
eiman-eltigani-ttd Dec 4, 2025
1dcaf4a
update integration section summary to be more clarifying
eiman-eltigani-ttd Dec 4, 2025
480cf86
fix build error
eiman-eltigani-ttd Dec 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 49 additions & 12 deletions web-integrations/google-secure-signals/client-server/public/stylesheets/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,13 +128,26 @@ h2 {
border-bottom: 3px solid var(--primary-orange);
}

/* Teal section header for Google Secure Signals */
h2.section-teal {
border-bottom: 3px solid var(--accent-teal);
}

p {
font-size: 0.95rem;
color: var(--text-gray);
color: var(--text-dark);
margin-bottom: 2rem;
line-height: 1.8;
}

/* Section summary - same styling as intro but gray */
p.section-summary {
font-size: 0.95rem;
color: var(--text-gray);
margin-bottom: 1rem;
line-height: 1.8;
}

a {
color: var(--link-color);
text-decoration: underline;
Expand All @@ -146,32 +159,36 @@ a:hover {
opacity: 0.8;
}

/* State Table */
#uid_state {
/* State Tables */
#uid_state,
#secure_signals_state {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
margin: 1rem 0 2rem 0;
font-size: 0.875rem;
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: hidden;
position: relative;
overflow: visible;
position: relative;
}

#uid_state tr {
#uid_state tr,
#secure_signals_state tr {
border-bottom: 1px solid var(--border-color);
}

#uid_state tr:nth-child(even) {
#uid_state tr:nth-child(even),
#secure_signals_state tr:nth-child(even) {
background-color: var(--bg-light);
}

#uid_state tr:last-child {
#uid_state tr:last-child,
#secure_signals_state tr:last-child {
border-bottom: none;
}

#uid_state td {
#uid_state td,
#secure_signals_state td {
padding: 1rem;
vertical-align: top;
}
Expand Down Expand Up @@ -200,6 +217,11 @@ a:hover {
margin-top: 2rem;
}

.form.top-form {
margin-top: 0;
margin-bottom: 2rem;
}

.form-inline {
display: flex;
gap: 0;
Expand Down Expand Up @@ -260,6 +282,21 @@ a:hover {
border-radius: 8px;
}

/* Opt-out banner */
.optout-banner {
background: linear-gradient(135deg, rgba(251, 191, 36, 0.15) 0%, rgba(251, 191, 36, 0.05) 100%);
border-left: 4px solid var(--accent-yellow);
padding: 1rem 1.25rem;
margin: 1rem 0 2rem 0;
border-radius: 6px;
}

.optout-banner p {
margin: 0;
color: var(--text-dark);
font-weight: 500;
}

/* Tooltip Styles - Matching Self-Serve Portal */
.tooltip-wrapper {
display: inline-flex;
Expand Down Expand Up @@ -339,7 +376,7 @@ a:hover {
.page-wrapper {
flex-direction: column;
}

.sidebar {
position: static;
max-height: none;
Expand All @@ -361,7 +398,7 @@ a:hover {
border-right: 2px solid var(--border-color);
border-bottom: none;
}

.button {
width: 100%;
}
Expand Down
26 changes: 13 additions & 13 deletions web-integrations/google-secure-signals/client-server/public/stylesheets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,19 @@
}

#playButton {
margin-top: 10px;
vertical-align: top;
width: 350px;
height: 60px;
padding: 0;
font-size: 22px;
width: 100px;
height: 36px;
margin-top: 0.5rem;
background: var(--button-navy, rgba(2, 10, 64, 1));
color: white;
text-align: center;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #2c3e50;
border: 0;
border-bottom: 2px solid #22303f;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #22303f;
box-shadow: inset 0 -2px #22303f;
transition: all 0.2s ease;
}

#playButton:hover {
background: var(--button-navy-hover, rgba(2, 10, 64, 0.9));
}
80 changes: 45 additions & 35 deletions web-integrations/google-secure-signals/client-server/views/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,20 +138,35 @@
<div class="main-content">
<%- include('intro.html'); -%>

<div id="googleAdContainer" style="display: none">
<div id="mainContainer">
<div id="content">
<video id="contentElement">
<source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
</video>
<!-- Generate/Clear buttons at the top for easy access -->
<div id="login_form" style="display: none" class="form top-form">
<form action="/login" method="POST">
<div class="form-inline">
<input
type="text"
id="email"
name="email"
placeholder="Enter an email address"
class="email-input"
/>
<input type="submit" value="Generate <%- identityName %>" class="button" />
</div>
<div id="adContainer"></div>
</div>
<button id="playButton">Play</button>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script type="text/javascript" src="ads.js"></script>
</form>
</div>

<div id="logout_form" style="display: none" class="form top-form">
<button type="button" class="button" id="logout">Clear <%- identityName %></button>
</div>

<div id="optout_form" style="display: none" class="form top-form">
<button type="button" class="button" id="try_another">Try Another Email</button>
</div>

<div id="optout_banner" style="display: none" class="optout-banner">
<p>The email address you entered has opted out of <%- identityName %>.</p>
</div>

<!-- UID2 Integration Status Section -->
<h2><%- identityName %> Integration Status</h2>

<table id="uid_state">
Expand Down Expand Up @@ -211,6 +226,13 @@ <h2><%- identityName %> Integration Status</h2>
</td>
<td class="value"><pre id="identity_state"></pre></td>
</tr>
</table>

<!-- Google Secure Signals Section -->
<h2 class="section-teal">Google Secure Signals Status</h2>
<p class="section-summary">Secure Signals automatically reads the token from storage and shares it with Google Ad Manager.</p>

<table id="secure_signals_state">
<tr>
<td class="label">
<div class="tooltip-wrapper">
Expand Down Expand Up @@ -241,31 +263,19 @@ <h2><%- identityName %> Integration Status</h2>
</tr>
</table>

<div id="optout_banner" style="display: none" class="optout-banner">
<p>The email address you entered has opted out of <%- identityName %>.</p>
</div>

<div id="login_form" style="display: none" class="form">
<form action="/login" method="POST">
<div class="form-inline">
<input
type="text"
id="email"
name="email"
placeholder="Enter an email address"
class="email-input"
/>
<input type="submit" value="Generate <%- identityName %>" class="button" />
<!-- Video Ad Container - at the bottom -->
<div id="googleAdContainer" style="display: none">
<div id="mainContainer">
<div id="content">
<video id="contentElement">
<source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
</video>
</div>
</form>
</div>

<div id="logout_form" style="display: none" class="form">
<button type="button" class="button" id="logout">Clear <%- identityName %></button>
</div>

<div id="optout_form" style="display: none" class="form">
<button type="button" class="button" id="try_another">Try Another Email</button>
<div id="adContainer"></div>
</div>
<button id="playButton">Play</button>
<script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script type="text/javascript" src="ads.js"></script>
</div>
</div>

Expand Down
45 changes: 26 additions & 19 deletions web-integrations/google-secure-signals/client-side/html/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,33 @@
<link rel="stylesheet" type="text/css" href="/styles/app.css" />
<link rel="shortcut icon" href="images/favicon.png" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

</script>
</head>
<body>
<div class="page-wrapper">
<!-- Main Content Area -->
<div class="main-content">
<h1>Client-Side ${IDENTITY_NAME} Integration with Google Secure Signals</h1>
<p class="intro">
This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Google Secure Signals</strong> for Google Ad Manager, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-javascript-client-side">Client-Side Integration Guide for JavaScript</a> and <a href="${DOCS_BASE_URL}/guides/integration-google-ss">Google Ad Manager Secure Signals Integration Guide</a>.
This example demonstrates how a content publisher can integrate ${IDENTITY_NAME} with <strong>Google Secure Signals</strong> for Google Ad Manager, using client-side token generation. For documentation, see the <a href="${DOCS_BASE_URL}/guides/integration-javascript-client-side">Client-Side Integration Guide for JavaScript</a> and <a href="${DOCS_BASE_URL}/guides/integration-google-ss">Google Ad Manager Secure Signals Integration Guide</a>. [<a href="https://github.com/IABTechLab/uid2-examples/tree/main/web-integrations/google-secure-signals/client-side">Source Code</a>]
</p>

<!-- Generate/Clear buttons at the top for easy access -->
<div id="login_form" style="display: none" class="form" style="margin-top: 0; margin-bottom: 2rem;">
<div class="email_prompt">
<input
type="text"
id="email"
name="email"
placeholder="Enter an email address"
/>
<button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
</div>
</div>
<div id="logout_form" style="display: none" class="form top-form">
<button type="button" class="button" id="logout">Clear ${IDENTITY_NAME}</button>
</div>

<!-- UID2 Integration Status Section -->
<h2>${IDENTITY_NAME} Integration Status</h2>

<table id="uid_state">
Expand Down Expand Up @@ -93,6 +107,13 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
</td>
<td class="value"><pre id="identity_state"></pre></td>
</tr>
</table>

<!-- Google Secure Signals Section -->
<h2 class="section-teal">Google Secure Signals Status</h2>
<p class="section-summary">Secure Signals automatically reads the token from storage and shares it with Google Ad Manager.</p>

<table id="secure_signals_state">
<tr>
<td class="label">
<div class="tooltip-wrapper">
Expand Down Expand Up @@ -123,6 +144,7 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
</tr>
</table>

<!-- Video Ad Container - at the bottom -->
<div id="page-content">
<div id="video-container">
<video id="video-element">
Expand All @@ -133,21 +155,6 @@ <h2>${IDENTITY_NAME} Integration Status</h2>
</div>
<button id="play-button">Play</button>
</div>

<div id="login_form" style="display: none" class="form">
<div class="email_prompt">
<input
type="text"
id="email"
name="email"
placeholder="Enter an email address"
/>
<button type="button" class="button" id="login">Generate ${IDENTITY_NAME}</button>
</div>
</div>
<div id="logout_form" style="display: none" class="form">
<button type="button" class="button" id="logout">Clear ${IDENTITY_NAME}</button>
</div>
</div>

<!-- Sidebar for Instructions -->
Expand Down
Loading