Skip to content

Feature #8

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
sudeepkumar10x merged 4 commits into from
Jan 16, 2026
Merged

Feature #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b772447
Day 1 Instructions
sudeepkumar10x Jan 16, 2026
dfc7d0a
Rename day 1.html to index.html
sudeepkumar10x Jan 16, 2026
4a0d9e7
Add files via upload
sudeepkumar10x Jan 16, 2026
69033f8
Add files via upload
sudeepkumar10x Jan 16, 2026
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
Binary file added Instructions/day 1_files/141535473
View file
Open in desktop
Binary file not shown.
105 changes: 105 additions & 0 deletions Instructions/day 1_files/analytics.js.download
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions Instructions/day 1_files/analytics.min.js.download
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions Instructions/day 1_files/commons.59560acdd69ed701c941.js.gz
View file
Open in desktop

Large diffs are not rendered by default.

355 changes: 355 additions & 0 deletions Instructions/day 1_files/frame.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,355 @@
<!DOCTYPE html>
<!-- saved from url=(0046)https://qjmnz4vd2y07.statuspage.io/embed/frame -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Frame</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 12vh;
letter-spacing: .5vh;
}
* { box-sizing: border-box; }
a { color: inherit; }

.frame-wrapper {
display: flex;
background-color: #e67e22;
color: #FFFFFF;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
border-radius: 3px;
}

.frame-icon {
flex: 1;
padding-top: 14vh;
font-size: 15vh;
text-align: center;

-moz-transform: scale(0.5, 0.5) translateY(-35vh);
}

.frame-close {
text-align: right;
min-width: 11vh;
font-size: 11vh;
flex: .7;
padding: 14vh 14vh 0 0;

-moz-transform: scale(0.5, 0.5) translateY(-35vh);
}

.frame-content {
flex: 6;
padding: 14vh 0 18vh 2vw;
display: flex;
flex-direction: column;
}

.incident-title {
word-wrap: break-word;
margin: 0;
width: 72vw;
max-height: 30vh;
min-height: 16vh;
overflow: hidden;
}

.incident-title p {
font-size: 12vh;
letter-spacing: .5vh;
font-weight: 500;
margin: 0;
}

.incident-context {
margin-top: 5vh;
margin-bottom: 5vh;
font-size: 10vh;
letter-spacing: .5vh;
flex: 1;
}

.svg-button {
border: none;
background: none;
cursor: pointer;
padding: 1vh 0 2vh 0;
}

.frame-wrapper.mobile {
border-radius: 0;
}

</style>
</head>
<body data-new-gr-c-s-check-loaded="14.1268.0" data-gr-ext-installed="">
<div class="frame-wrapper " id="frame-div" style="background-color: rgb(230, 126, 34); color: rgb(255, 255, 255);"><div class="frame-icon">
<svg width="1em" height="1em" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="status-embed-svg-exclamation-icon">
<defs>
<path d="M13.4161506,4.41651608 L19.5838494,10.5844619 C20.3671375,11.3677813 20.3659678,12.6346542 19.5838494,13.4167144 L13.4161506,19.5839547 C12.6328625,20.3671845 11.3659678,20.3660149 10.5838494,19.5839547 L4.41615055,13.4167144 C3.63286252,12.6334846 3.6340322,11.3666116 4.41615055,10.5844619 L10.5838494,4.41651608 C11.3671375,3.63319669 12.6340322,3.63436641 13.4161506,4.41651608 Z M12,14 C12.552,14 13,13.552 13,13 L13,8 C13,7.448 12.552,7 12,7 C11.448,7 11,7.448 11,8 L11,13 C11,13.552 11.448,14 12,14 Z M12,17 C12.552,17 13,16.552 13,16 C13,15.448 12.552,15 12,15 C11.448,15 11,15.448 11,16 C11,16.552 11.448,17 12,17 Z" id="path-error"></path>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-706.000000, -763.000000)">
<g id="global/error" transform="translate(702.500000, 759.500000)">
<mask id="mask-error" fill="white">
<use xlink:href="#path-error"></use>
</mask>
<use id="Combined-Shape" fill="#42526E" fill-rule="evenodd" xlink:href="#path-error"></use>
<g id="Neutral-/-N000" mask="url(#mask-error)" fill="#FFFFFF" fill-rule="evenodd">
<polygon points="0 24 24 24 24 0 0 0"></polygon>
</g>
</g>
</g>
</g>
</svg>

</div>

<div class="frame-content">
<h1 class="incident-title">
<p>Status embed installed correctly</p>
</h1>

<div class="incident-item incident-context" id="incident-text-div">
This will be shown if an incident or maintenance is posted on your status page.
</div>

<div class="incident-item view-link">
<a class="page-link" href="https://www.streamlitstatus.com/?utm_source=embed" target="_blank">View latest updates</a>
</div>
</div>

<div class="frame-close">
<button class="svg-button" onclick="dismissFrame()">
<svg width="1em" height="1em" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="status-embed-svg-close-icon">
<defs>
<path d="M10,8.8214887 L14.4107443,4.41074435 C14.7361813,4.08530744 15.2638187,4.08530744 15.5892557,4.41074435 C15.9146926,4.73618126 15.9146926,5.26381874 15.5892557,5.58925565 L11.1785113,10 L15.5892557,14.4107443 C15.9146926,14.7361813 15.9146926,15.2638187 15.5892557,15.5892557 C15.2638187,15.9146926 14.7361813,15.9146926 14.4107443,15.5892557 L10,11.1785113 L5.58925565,15.5892557 C5.26381874,15.9146926 4.73618126,15.9146926 4.41074435,15.5892557 C4.08530744,15.2638187 4.08530744,14.7361813 4.41074435,14.4107443 L8.8214887,10 L4.41074435,5.58925565 C4.08530744,5.26381874 4.08530744,4.73618126 4.41074435,4.41074435 C4.73618126,4.08530744 5.26381874,4.08530744 5.58925565,4.41074435 L10,8.8214887 Z" id="path-x"></path>
</defs>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1027.000000, -941.000000)">
<g id="global/cross" transform="translate(1023.500000, 937.500000)">
<mask id="mask-x" fill="white">
<use xlink:href="#path-x"></use>
</mask>
<use id="Combined-Shape" fill="#42526E" fill-rule="nonzero" xlink:href="#path-x"></use>
<g id="Dark-neutral-/-DN070" mask="url(#mask-x)" fill="#FFFFFF" fill-rule="evenodd">
<polygon id="DN70" points="0 20 20 20 20 0 0 0"></polygon>
</g>
</g>
</g>
</g>
</svg>

</button>
</div>
</div>
<script type="text/javascript">
var displayItemCode = '';
var lsKeyDismissed = location.hostname + '_dismissed';
var unresolvedItems = [];

// check if we can use localStorage (some users may disable 3rd party cookies)
var localStorageAvailable = true
try {
localStorage.setItem('test', 'test');
localStorage.removeItem('test');
} catch(e) {
localStorageAvailable = false;
}

init = function() {
if (localStorageAvailable && localStorage.getItem(lsKeyDismissed) == null) {
localStorage.setItem(lsKeyDismissed, '[]')
}
clampTitle();
showNewItems(unresolvedItems)
var xhr = new XMLHttpRequest();
setInterval(pollForChanges, 60 * 1000, '/api/v2/status.json', xhr);
}

showNewItems = function(unresolvedItems) {
var dismissed = [];

if (localStorageAvailable) {
var lsDismissedItem = localStorage.getItem(lsKeyDismissed);
if (lsDismissedItem) {
dismissed = JSON.parse(lsDismissedItem);
}
}

var dismissedSet = new Set();
var nothingToShow = true;
dismissed.forEach(function(d) {
dismissedSet.add(d);
});
unresolvedItems.forEach(function(ui) {
if (!dismissedSet.has(ui)) {
showFrame();
nothingToShow = false;
return;
}
})
if (nothingToShow) {
dismissFrame();
}
}

updateIncidentTime = function(incident_updated_at) {
var incidentTextDiv = document.getElementById('incident-text-div')
incidentTextDiv.textContent = 'Last updated ' + timeDifference(new Date(incident_updated_at))
}

showFrame = function() {
parent.postMessage({action: 'showFrame'}, '*');
}

operateOnFrameJson = function(callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET','/embed/frame.json');
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
data = JSON.parse(xhr.response);
callback(data);
}
}
}

pollForChanges = function (url, xhr) {
xhr.open('GET', url);
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status != 304) {
operateOnFrameJson(function(data) {
var frameDiv = document.getElementById('frame-div')

// update frame styles in case we switched mode or the settings were updated
frameDiv.style.backgroundColor = data.background_color
frameDiv.style.color = data.text_color

// update frame content
frameDiv.innerHTML = data.frame_html
if ("incident_last_updated_at" in data) {
updateIncidentTime(data.incident_last_updated_at)
}
unresolvedItems = data.unresolved_items
clampTitle()
showNewItems(unresolvedItems)
})
}
}
}
}

dismissFrame = function() {
if (localStorageAvailable) {
localStorage.setItem(lsKeyDismissed, JSON.stringify(unresolvedItems));
} else {
console.log("You dismissed the flag, but third party cookies are disabled on your browser so the flag will come back the next time you visit the page.")
}

parent.postMessage({action: 'dismissFrame'}, '*');
}

clampTitle = function() {
var div = document.querySelector('.incident-title')
var p = document.querySelector('.incident-title p');
var divHeight = div.clientHeight;

while (p.clientHeight > divHeight) {
var text = p.innerHTML;

if (!/\s/.test(text)) {
// this case handles an infinite loop that occurred when the first word was too long to display in the banner
// this also occurred when the first word was the only word and was too long to display, now we simply
// truncate characters within the word itself.

if (text.length <= 10) {
// There's a certain point at which the zoom can make it so the text's height will never be within the div's height.
// This at least happens on Safari becasue the formatting is weird.
// This makes sure we don't get stuck in an infinite loop in this case.
return;
}

// replace the last character with ...
p.innerHTML = text.replace(/\w(\W*)$/, '...');
} else {
p.innerHTML = text.replace(/\W*\s(\S)*$/, '...'); // replace last word with ...
}
}
}

timeDifference = function(previous) {
var msPerMinute = 60 * 1000;
var msPerHour = msPerMinute * 60;
var msPerDay = msPerHour * 24;
var msPerMonth = msPerDay * 30;
var msPerYear = msPerDay * 365;
var now = new Date();
var elapsedMs = now - previous;

var elapsed = Math.round(elapsedMs/msPerMinute);
if (elapsed == 0 ) {
return '1 minute ago';
}
else if (elapsed < 60) {
return elapsed + ' minute' + plural(elapsed) + ' ago';
}

elapsed = Math.round(elapsedMs/msPerHour);
if (elapsed < 24) {
return elapsed + ' hour' + plural(elapsed) + ' ago';
}

elapsed = Math.round(elapsedMs/msPerDay);
if (elapsed < 31) {
return elapsed + ' day' + plural(elapsed) + ' ago';
}

elapsed = Math.round(elapsedMs/msPerMonth);
if (elapsed < 12) {
return elapsed + ' month' + plural(elapsed) + ' ago';
}

elapsed = Math.round(elapsedMs/msPerYear);
return elapsed + ' year' + plural(elapsed) + ' ago';
}

plural = function(x) {
return (x <= 1) ? '' : 's';
}

init();
</script>


</body><grammarly-desktop-integration data-grammarly-shadow-root="true"><template shadowrootmode="open"><style>
div.grammarly-desktop-integration {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
}

div.grammarly-desktop-integration:before {
content: attr(data-content);
}
</style><div aria-label="grammarly-integration" role="group" tabindex="-1" class="grammarly-desktop-integration" data-content="{&quot;mode&quot;:&quot;full&quot;,&quot;isActive&quot;:true,&quot;isUserDisabled&quot;:false}"></div></template></grammarly-desktop-integration></html>
Loading
Loading