Skip to content

Commit

Permalink
Prepare web application for embed (#601)
Browse files Browse the repository at this point in the history 
Signed-off-by: Cintia Sanchez Garcia <[email protected]>
  • Loading branch information
@cynthia-sg
cynthia-sg authored May 27, 2024
1 parent d3a718f commit 875347b
Show file tree
Hide file tree
Showing 13 changed files with 775 additions and 81 deletions.
226 changes: 226 additions & 0 deletions web/public/static/demo-embed/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,226 @@
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>Clotributor embed</title>
<style>
html {
height: 100%;
height: 100vh;
}

body {
height: 100%;
height: 100vh;
margin: 0;
background-color: #fdfdfd;
font-family: clarity city,-apple-system,BlinkMacSystemFont,segoe ui,Helvetica,Arial,sans-serif,Roboto,Ubuntu,apple color emoji,segoe ui emoji,segoe ui symbol;
}

header {
display: block;
}

nav {
position: relative;
z-index: 1;
padding: 15px 0;
background-color: rgba(252,252,252,.98);
top: 0;
width: 100%;
margin: 0;
display: flex;
box-shadow: 0px 20px 25px 0px rgba(0,0,0,0.1);
align-items: center;
}

.navbar-brand {
display: inline-block;
padding: 0 15px;
color: #333;
text-decoration: none;
margin-left: 2rem;
}

.navbar-logo svg {
height: 40px;
}

.list {
margin-left: auto;
margin-right: 2rem;
letter-spacing: 0.02em;
font-weight: 600;
display: flex;
}

.nav-link {
padding: 0 0.5rem;
margin: 0 1rem;
position: relative;
}

.active::after {
content: '';
background-color: #967ef8;
position: absolute;
left: 0;
width: 100%;
bottom: -28px;
height: 4px;
}

.main {
display: flex;
align-items: stretch;
min-height: calc(100% - 73px);
}

.aside {
width: 20%;
background-color: #f4f4f4;
border-right: 1px solid #dee2e6;
padding: 1rem;
}

.asideTitle {
text-transform: uppercase;
font-weight: 600;
opacity: 1;
letter-spacing: 2px;
margin-bottom: 1rem;
}

.asideContent {
margin: 4rem 2rem;
opacity: 0.7;
}

.asideContent p {
font-size: 0.85rem;
line-height: 1.5rem;
margin-bottom: 2rem;
}

.content {
width: 80%;
padding: 5rem 3rem;
}

.bigTitle {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
}

p {
font-size: 1.1rem;
font-weight: 400;
line-height: 1.75rem;
}

.iframeWrapper {
height: 700px;
}

@media only screen and (max-width: 1399.98px) {
.aside {
width: 25%;
}

.content {
width: 75%;
}
}

@media only screen and (max-width: 1199.98px) {
.aside {
width: 30%;
}

.content {
width: 70%;
}
}

@media only screen and (max-width: 991.98px) {
.navbar-brand {
margin-left: 1rem;
}

.list {
margin-right: 1rem;
}

.aside {
display: none;
}

.content {
width: 100%;
padding: 3rem 2rem;
}

.nav-link:not(.active) {
display: none;
}

.bigTitle {
font-size: 1.75rem;
}

p {
font-size: 0.9rem;
line-height: 1.5rem;
}
}
</style>
</head>
<body>
<header>
<nav>
<div class="navbar-brand">
<span class="navbar-logo">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="-9.56 -10.06 523.12 100.12"><g clip-path="url(#clip0_7112_17482)"><path fill="#5c2cff" d="M101.149 64.204h56v6.114h-56zm346.762.0h56v6.114h-56z"></path><path d="M120.287 30.9112C122.221 30.9495 124.136 30.5275 125.875 29.6799 127.613 28.8322 129.126 27.5833 130.287 26.0362l5.375 5.5c-4.25 4.75-9.125 7.125-14.875 7.125C118.192 38.7602 115.604 38.3352 113.177 37.4117 110.75 36.4882 108.534 35.0851 106.662 33.2862 104.838 31.5297 103.406 29.4082 102.458 27.0604 101.51 24.7126 101.069 22.1913 101.162 19.6612 101.09 17.104 101.554 14.5601 102.523 12.1924 103.491 9.82464 104.943 7.68525 106.787 5.91118 108.769 4.04078 111.11 2.59143 113.668 1.65062 116.226.709815 118.948.297045 121.67.437227 124.391.57741 127.057 1.26764 129.504 2.46625 131.952 3.66487 134.132 5.34702 135.912 7.41118l-5.125 5.87502C129.657 11.766 128.187 10.5327 126.493 9.68584 124.799 8.83899 122.93 8.40234 121.037 8.41118 118.085 8.35438 115.223 9.42756 113.037 11.4112 111.902 12.4535 111.011 13.7333 110.428 15.1593 109.844 16.5853 109.583 18.1225 109.662 19.6612 109.583 21.1966 109.819 22.7319 110.357 24.1724 110.894 25.6128 111.721 26.9278 112.787 28.0362c2.056 1.8557 4.729 2.8805 7.5 2.875v0zm21.874 7.2499V1.03613h8.25V30.7861h15.875v7.375H142.161zm60.375-5.1249C198.78 36.5694 193.818 38.5367 188.661 38.5367 183.505 38.5367 178.542 36.5694 174.786 33.0362 172.955 31.2797 171.509 29.1612 170.54 26.8155 169.572 24.4698 169.102 21.9482 169.161 19.4112 169.091 16.8726 169.555 14.3475 170.524 12.0001 171.493 9.65272 172.945 7.53553 174.786 5.78617 178.542 2.25291 183.505.285645 188.661.285645 193.818.285645 198.78 2.25291 202.536 5.78617 204.368 7.54265 205.814 9.66113 206.782 12.0068 207.751 14.3525 208.22 16.8741 208.161 19.4112 208.232 21.9498 207.768 24.4748 206.799 26.8222S204.377 31.2868 202.536 33.0362v0zm-2.875-13.625c.0229999999999961-3.1411-1.137-6.1757-3.25-8.5C195.416 9.80975 194.201 8.92929 192.845 8.32668 191.488 7.72407 190.021 7.41271 188.536 7.41271 187.052 7.41271 185.584 7.72407 184.228 8.32668 182.871 8.92929 181.656 9.80975 180.661 10.9112c-2.136 2.3095-3.30099999999999 5.354-3.25 8.5-.0229999999999961 3.141 1.137 6.1756 3.25 8.5C181.656 29.0126 182.871 29.8931 184.228 30.4957 185.584 31.0983 187.052 31.4096 188.536 31.4096 190.021 31.4096 191.488 31.0983 192.845 30.4957 194.201 29.8931 195.416 29.0126 196.411 27.9112 197.494 26.7837 198.339 25.4505 198.898 23.9905 199.456 22.5305 199.716 20.9733 199.661 19.4112v0zm25.375 9.2498C225.696 29.5159 226.551 30.2003 227.53 30.657 228.508 31.1137 229.582 31.3294 230.661 31.286 231.724 31.3425 232.784 31.1318 233.745 30.6733 234.706 30.2148 235.536 29.523 236.161 28.661 237.597 26.6193 238.301 24.1529 238.161 21.661V1.16101h8.25V21.911c0 5.375-1.5 9.5-4.5 12.375C240.401 35.7343 238.617 36.8672 236.664 37.6183 234.711 38.3695 232.628 38.724 230.536 38.661 228.426 38.724 226.324 38.37 224.35 37.6193 222.377 36.8685 220.571 35.7358 219.036 34.286c-3-2.875-4.5-7-4.5-12.375V1.16101h8.25V21.661C222.784 24.1726 223.571 26.6214 225.036 28.661v0zM283.411 5.91113c3.5 3.25 5.375 7.74997 5.375 13.49997.0 5.75-1.75 10.375-5.125 13.75s-8.75 5-15.75 5H255.036V1.03613h13.125c6.625.0 11.75 1.625 15.25 4.875zm-6 22.12497c2-1.875 3-4.75 3-8.375s-1-6.5-3-8.375c-2-1.87497-5.125-2.99997-9.375-2.99997h-4.625V30.9111h5.25C271.835 31.0802 274.956 30.0545 277.411 28.0361v0zm58.5-26.99997h8.25V38.1611h-8.25l-17.75-23.25v23.25h-8.25V1.03613h7.75l18.25 23.87497V1.03613zM379.786 38.1611l-3.5-8H360.661l-3.5 8h-8.875l16-37.12497h8l16 37.12497h-8.5zm-11.125-26-4.625 10.75h9.25l-4.625-10.75zm37.375-3.87509V38.286h-8.25V8.28601h-10.5v-7.125h29.375v7.125H406.036zm16.5-7.24988h8.25V38.1611h-8.25V1.03613zM453.661 24.6611l9.5-23.62497h9L457.286 38.1611h-7L435.411 1.03613h9l9.25 23.62497zM503.286 1.03613v7.375h-18.5V16.0361h16.625v7.125H484.786v7.75h19.125v7.375H476.536V1.16113h26.75v-.125zM11.9111 53.5731H.536133V80.2856H27.1611V68.7981h-15.25V53.5731zm57.25.125v15.1h-15.25V80.2856h26.625V53.5731h-11.5l.125.125zM.536133 26.9981H12.0361l-.125-.125v-15.1h15.25V.285645H.536133V26.9981zM53.9111.285645V11.7731h15.25v15.225h11.375V.285645H53.9111z"></path><path d="M52.4111 26.9981l-15.25-15.225h16.75V.285645h-26.75V11.7731l15.25 15.225h10zm-13.75 26.575h-10l12.625 12.6125L43.7861 68.7981H27.1611V80.2856h26.75V68.6731L46.2861 61.1731l-7.625-7.6zm30.5-26.5749v16.6l-2.625-2.625-12.625-12.6125V38.4732l7.5 7.5 7.625 7.6125h11.5V26.9982H69.1611zm-42 15.1-15.125-15.1H.536133v26.575H11.9111v-16.6l15.25 15.2375V42.0982z" opacity=".65"></path><path d="M179.786 77.9457C182.996 77.9457 185.906 76.5657 187.946 74.3757l-3.72-3.3C183.146 72.4257 181.556 73.2957 179.786 73.2957 176.636 73.2957 173.966 70.5357 173.966 67.2657 173.966 64.0257 176.636 61.2657 179.786 61.2657 181.526 61.2657 183.146 62.1357 184.196 63.4857l3.75-3.33C185.906 57.9957 182.996 56.6157 179.786 56.6157c-6.03.0-11.1 4.86000000000001-11.1 10.65C168.686 73.0557 173.756 77.9457 179.786 77.9457zm22.975.0c6 0 11.07-4.89 11.07-10.68C213.831 61.4757 208.761 56.6157 202.761 56.6157c-6.03.0-11.1 4.86000000000001-11.1 10.65C191.661 73.0557 196.731 77.9457 202.761 77.9457zM202.761 73.2957C199.611 73.2957 196.941 70.5357 196.941 67.2657 196.941 64.0257 199.611 61.2657 202.761 61.2657S208.551 64.0257 208.551 67.2657C208.551 70.5357 205.911 73.2957 202.761 73.2957zM219.056 77.5857h5.13v-12.18l9 12.18H238.286v-20.61H233.186v12.18l-9-12.18h-5.13v20.61zm30.413.0h5.13v-16.02H260.869v-4.59h-17.64v4.59H249.469v16.02zm33.847.0L278.426 70.6557C281.336 69.6357 283.196 67.2057 283.196 64.0557 283.196 59.8857 279.926 56.9757 275.366 56.9757H265.796v20.61h5.13v-6.45H272.966L277.496 77.5857H283.316zm-12.39-15.93H274.916c1.76999999999998.0 3 .959999999999994 3 2.4S276.686 66.4557 274.916 66.4557H270.926V61.6557zm17.64 15.93h5.13v-20.61H288.566v20.61zm11.432.0h11.19C315.268 77.5857 318.178 75.3057 318.178 72.0057c0-2.25-1.41000000000003-4.2-3.81-5.25C316.168 65.8557 317.248 64.2057 317.248 62.1657 317.248 59.1657 314.578 56.9757 310.768 56.9757h-10.77v20.61zM305.098 65.1357v-3.81h4.44C310.948 61.3257 311.968 62.1057 311.968 63.2157S310.948 65.1357 309.538 65.1357h-4.44zM305.098 73.2357v-4.14h5.19C311.818 69.0957 312.898 69.9657 312.898 71.1657S311.818 73.2357 310.288 73.2357h-5.19zM332.444 77.9457C338.084 77.9457 342.014 74.0757 342.014 68.5557v-11.58H336.914v11.34C336.914 71.2257 335.054 73.2957 332.444 73.2957 329.864 73.2957 328.004 71.2257 328.004 68.3157v-11.34h-5.13v11.58C322.874 74.0757 326.834 77.9457 332.444 77.9457zM352.74 77.5857h5.13v-16.02H364.14v-4.59H346.5v4.59H352.74v16.02zM379.058 77.9457c6 0 11.07-4.89 11.07-10.68C390.128 61.4757 385.058 56.6157 379.058 56.6157 373.028 56.6157 367.958 61.4757 367.958 67.2657 367.958 73.0557 373.028 77.9457 379.058 77.9457zM379.058 73.2957C375.908 73.2957 373.238 70.5357 373.238 67.2657 373.238 64.0257 375.908 61.2657 379.058 61.2657 382.208 61.2657 384.848 64.0257 384.848 67.2657 384.848 70.5357 382.208 73.2957 379.058 73.2957zM412.873 77.5857 407.983 70.6557C410.893 69.6357 412.753 67.2057 412.753 64.0557 412.753 59.8857 409.483 56.9757 404.923 56.9757H395.353v20.61h5.13v-6.45H402.523L407.053 77.5857H412.873zm-12.39-15.93H404.473c1.76999999999998.0 3 .959999999999994 3 2.4S406.243 66.4557 404.473 66.4557H400.483V61.6557zm25.71 16.29c5.10000000000002.0 8.25-2.58 8.25-6.72C434.443 67.3557 431.473 66.0357 426.853 65.0457 423.793 64.3857 422.803 63.9657 422.803 62.7057 422.803 61.6857 423.733 60.9057 425.383 60.9057 427.303 60.9057 429.373 61.6557 431.263 63.0957L433.873 59.4357C431.683 57.6357 428.983 56.6157 425.503 56.6157 420.823 56.6157 417.643 59.2557 417.643 63.2157 417.643 67.3557 420.913 68.5557 425.323 69.5457 428.323 70.2657 429.283 70.5357 429.283 71.7657 429.283 72.8757 428.293 73.6557 426.373 73.6557 423.853 73.6557 421.603 72.6957 419.593 71.0457L416.683 74.4957C419.203 76.7457 422.533 77.9457 426.193 77.9457z"></path></g><defs><clipPath id="clip0_7112_17482"><path fill="#fff" d="M0 0H504.125V80H0z" transform="translate(.536 .286)"></path></clipPath></defs></svg>
</span>
</div>
<div class="list">
<div class="nav-link">
<span>Projects</span>
</div>
<div class="nav-link active">
<span class="active">Contributions</span>
</div>
<div class="nav-link">
<span>About</span>
</div>
</div>
</nav>
</header>
<main class="main">
<div class="aside">
<div class="asideContent">
<div class="asideTitle">Title</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="content">
<div class="bigTitle">Contribute to the CNCF Ecosystem</div>
<p>
Welcome! Are you interested in contributing to one of CNCF hosted projects? This repository should help you. It contains information and guidelines about contributions to CNCF projects.
</p>
<p>
CNCF offers multiple ways to start contributing to the CNCF ecosystem, including either foundation-wide and project-wide opportunities.
</p>
<p>
However, contributing to the CNCF ecosystem is not just about coding. There are many other ways to contribute to the CNCF ecosystem, including writing documentation, creating tutorials, bringing ideas to meetings, organizing meetups, and more.
</p>
<br />
<br />
<div class="iframeWrapper">
<iframe id="iframe-clotributor" height="700" scrolling="no" src="https://clotributor.dev/search?embed=true&foundation=cncf" style="width:100%;height:100%;display:block;border:none;"></iframe>
</div>
</div>
</main>
</body>
</html>
Loading

0 comments on commit 875347b

Please sign in to comment.