UI update
--Added intern level information table
This commit is contained in:
sairaj mote
parent
90fdf5829d
commit
54e4b81d03
71
css/main.css
71
css/main.css
@ -896,22 +896,22 @@ sm-carousel {
|
||||
&--big{
|
||||
grid-template-areas: 'img .' 'img para';
|
||||
} */
|
||||
/* &--intern{
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
} */
|
||||
}
|
||||
.person-card--intern {
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.person__image {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
/* &--intern{
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
object-position: top;
|
||||
border-radius: 50%;
|
||||
} */
|
||||
}
|
||||
.person__image--intern {
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
object-position: top;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.person__name {
|
||||
@ -931,6 +931,50 @@ sm-carousel {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.intern__project {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.intern__level {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
justify-self: flex-end;
|
||||
font-weight: calc(500 * var(--font-weight-factor));
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.starter {
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
|
||||
.motivated {
|
||||
color: black;
|
||||
background-color: #FFCA28;
|
||||
}
|
||||
|
||||
.passionate {
|
||||
color: black;
|
||||
background-color: #00E676;
|
||||
}
|
||||
|
||||
#intern_level_popup {
|
||||
--width: min(48rem, 100%);
|
||||
}
|
||||
|
||||
.table {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 6rem 1fr;
|
||||
}
|
||||
.table p {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
|
||||
#outlet_switcher {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -1357,4 +1401,11 @@ scroll-tab-panels > [active] {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.intern__level {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
.intern__level:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -808,10 +808,10 @@ sm-carousel{
|
||||
&--big{
|
||||
grid-template-areas: 'img .' 'img para';
|
||||
} */
|
||||
/* &--intern{
|
||||
&--intern{
|
||||
text-align: center;
|
||||
justify-items: center;
|
||||
} */
|
||||
}
|
||||
}
|
||||
.investor-card__overlay{
|
||||
// position: absolute;
|
||||
@ -821,12 +821,12 @@ sm-carousel{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
/* &--intern{
|
||||
&--intern{
|
||||
height: 10rem;
|
||||
width: 10rem;
|
||||
object-position: top;
|
||||
border-radius: 50%;
|
||||
} */
|
||||
}
|
||||
}
|
||||
.person__name{
|
||||
font-size: 1.1rem;
|
||||
@ -841,6 +841,43 @@ sm-carousel{
|
||||
.intern-flo-id{
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.intern__project{
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.intern__level{
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 0.2rem;
|
||||
margin-bottom: 0.3rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
justify-self: flex-end;
|
||||
font-weight: calc(500 * var(--font-weight-factor));
|
||||
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.starter{
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
}
|
||||
.motivated{
|
||||
color: black;
|
||||
background-color: #FFCA28;
|
||||
}
|
||||
.passionate{
|
||||
color: black;
|
||||
background-color: #00E676;
|
||||
}
|
||||
#intern_level_popup{
|
||||
--width: min(48rem, 100%);
|
||||
}
|
||||
.table{
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
grid-template-columns: 6rem 1fr;
|
||||
p{
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
#outlet_switcher{
|
||||
position: absolute;
|
||||
@ -1244,4 +1281,10 @@ scroll-tab-panels{
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
.intern__level{
|
||||
transition: transform 0.3s;
|
||||
&:hover{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -5,7 +5,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>ICO</title>
|
||||
<title>FLO Blockchain Contract</title>
|
||||
<link rel="shortcut icon" href="assets/RM logo.png" type="image/png">
|
||||
<link rel="stylesheet" href="css/main.min.css">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
@ -99,12 +99,10 @@
|
||||
<span class="outlet-label__name">Outlet</span>
|
||||
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
|
||||
</button>
|
||||
<h2 class="h2 weight-700 margin-bottom-1r">Initial Coin Offering</h2>
|
||||
<h2 class="h2 weight-700 margin-bottom-1r">FLO Blockchain Contract</h2>
|
||||
<p>
|
||||
The Initial Coin Offering (ICO) of RanchiMall was launched in 2017. It was envisioned to sell 21 million
|
||||
tokens over 14 phases over 3 years. However we paused the ICO after 2 phases were executed
|
||||
selling 100000 tokens. Unanticipated Risks emerged due to rapid price increase of our tokens in
|
||||
trading in our own custom exchange. The ICO will resume after de-risking process is complete.
|
||||
FLO Blockchain contract consists of all projects RanchiMall performs on FLO
|
||||
Blockchain (previously called Florincoin).
|
||||
</p>
|
||||
</section>
|
||||
<div class="rooms__header">
|
||||
@ -112,12 +110,6 @@
|
||||
<scroll-tab-header data-target="ico_page_group">
|
||||
<button class="room-button" title="Investors">
|
||||
<svg class="icon button__icon--left" xmlns='http://www.w3.org/2000/svg' class='ionicon' viewBox='0 0 512 512'><title>People</title><path d='M402 168c-2.93 40.67-33.1 72-66 72s-63.12-31.32-66-72c-3-42.31 26.37-72 66-72s69 30.46 66 72z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M336 304c-65.17 0-127.84 32.37-143.54 95.41-2.08 8.34 3.15 16.59 11.72 16.59h263.65c8.57 0 13.77-8.25 11.72-16.59C463.85 335.36 401.18 304 336 304z' fill='none' stroke='currentColor' stroke-miterlimit='10' stroke-width='32'/><path d='M200 185.94c-2.34 32.48-26.72 58.06-53 58.06s-50.7-25.57-53-58.06C91.61 152.15 115.34 128 147 128s55.39 24.77 53 57.94z' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'/><path d='M206 306c-18.05-8.27-37.93-11.45-59-11.45-52 0-102.1 25.85-114.65 76.2-1.65 6.66 2.53 13.25 9.37 13.25H154' fill='none' stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='32'/></svg>
|
||||
<span class="button__label">
|
||||
Contributing Investors
|
||||
</span>
|
||||
</button>
|
||||
<button class="room-button" title="Phases">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
|
||||
<span class="button__label">
|
||||
Product
|
||||
</span>
|
||||
@ -125,68 +117,17 @@
|
||||
<button class="room-button" title="Phases">
|
||||
<svg class="icon button__icon--left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z"/></svg>
|
||||
<span class="button__label">
|
||||
Purchase
|
||||
Projects
|
||||
</span>
|
||||
</button>
|
||||
</scroll-tab-header>
|
||||
</div>
|
||||
<scroll-tab-panels id="ico_page_group">
|
||||
<section class="grid carousel-container">
|
||||
<h3 class="h3 margin-bottom-1-5r">Contributing Investors</h3>
|
||||
<sm-carousel id="ico_page__carousel" indicator autoplay></sm-carousel>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="h3 margin-bottom-1-5r">Product</h3>
|
||||
<p class="margin-bottom-3r">
|
||||
Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed terms.
|
||||
RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available
|
||||
at link above. We have made certain changes in our terms as our learning has improved. All
|
||||
these changes are to support the interests of our long term investors.
|
||||
</p>
|
||||
<h4 class="h4 margin-bottom-1r">Summary of changes over white paper</h4>
|
||||
<ol type="1">
|
||||
<li>
|
||||
<p>
|
||||
RanchiMall Tokens (RMT) now own the financial gains emerging from all our blockchain contracts
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
RanchiMall FZE has been withdrawn as an asset in view of high holding costs
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Number of phase have been paused at 2 instead of 14 as initially envisioned
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Number of RMTs tokens in circulation has been paused to
|
||||
10000 instead of a release schedule of 21 million in 3 years. The un-issued tokens will stay vested
|
||||
with the Founder of RanchiMall.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
The price discovery during active phase has been USD 1500 per
|
||||
token giving RMTs in circulation a valuation of 150 million USD. Unless this price is realised in open
|
||||
makets on sustainable basis, new tokens will not be put in circulation.
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="h3 margin-bottom-1-5r">Purchase</h3>
|
||||
<p>
|
||||
Currently we are not selling any RanchiMall Tokens (RMT). You can buy nominal tokens at
|
||||
our last valuation in <a href="ranchimall.net/exchange">our exchange</a> for USD 10 or Rs 500 if you want to become a
|
||||
tokenholder, and be part of the learning process through our community. Our rules are designed to
|
||||
favour long term investors.
|
||||
<br> Once you initiate a tokenholder relationship, please be patient to stay the
|
||||
whole course of journey. You will not regret it.
|
||||
</p>
|
||||
</section>
|
||||
<h3 class="h3 margin-bottom-1-5r">Projects</h3>
|
||||
</scroll-tab-panels>
|
||||
</main>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
|
||||
|
||||
@ -18,13 +18,55 @@
|
||||
<template id="intern_card_template">
|
||||
<div class="person-card person-card--intern grid">
|
||||
<img class="person__image person__image--intern" src="" alt="" loading="lazy">
|
||||
<div class="grid intern__bio-container gap-0-5">
|
||||
<div class="grid intern__bio-container">
|
||||
<div class="intern__level" title="Click to see details"></div>
|
||||
<h4 class="person__name capitalize"></h4>
|
||||
<p class="intern-flo-id color-0-8 breakable"></p>
|
||||
<p class="intern__project"></p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<sm-popup id="intern_level_popup">
|
||||
<header class="popup__header" slot="header">
|
||||
<button class="close-button" onclick="getRef('intern_level_popup').hide()">
|
||||
<svg class="icon icon-only close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
||||
</button>
|
||||
<h4>Intern level information</h4>
|
||||
</header>
|
||||
<section class="grid">
|
||||
<header class="table margin-bottom-1-5r">
|
||||
<h4>Level</h4>
|
||||
<h4 >Details</h4>
|
||||
</header>
|
||||
<section class="table">
|
||||
<div>
|
||||
Starter
|
||||
</div>
|
||||
<p>
|
||||
Starter Level is the qualification level. This is learning stage and will lead to award of certificates to those who clear this level. In general we do not want to pay at this at level because money changes motivations. And we want to identify most passionate interns at their level, who would love their work even if no monetary consideration is involved
|
||||
</p>
|
||||
<div>
|
||||
Motivated
|
||||
</div>
|
||||
<p>
|
||||
Motivated is one time rewards stage. The complexity of projects will increase in this stage. If projects are successfully completed, then one time rewards will be given. All this will be known before hand. Project details, acceptance criteria, and amounts will be notified in advance to interns.
|
||||
</p>
|
||||
<div>
|
||||
Passionate
|
||||
</div>
|
||||
<p>
|
||||
Passionate is the first regular fixed stipend stage. The projects complexity will increase still further. This will be full scale commercial grade project. if 3 such projects are completed then one of the criteria to move into self driven stage will be met. Now we are looking for interns who in addition to being passionate are self driven, and can independently take on and complete full projects without day to day supervision.
|
||||
</p>
|
||||
<div>
|
||||
Self Driven
|
||||
</div>
|
||||
<p>
|
||||
Self Driven interns is the stage where are we are considering interns for permanent employment with Ranchi Mall. The internship stipends will be higher. Some of self driven interns will be guide interns in other levels. The key criteria is ability of complete jobs with high quality, and them taking self initiative.
|
||||
</p>
|
||||
</section>
|
||||
</section>
|
||||
</sm-popup>
|
||||
|
||||
<section id="elevator_popup" class="grid hide-completely">
|
||||
<header class="elevator__header">
|
||||
@ -110,7 +152,7 @@
|
||||
<section id="interns_container" class="masonry-layout"></section>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="h3 margin-bottom-1-5r">Product</h3>
|
||||
<h3 class="h3 margin-bottom-1-5r">Projects</h3>
|
||||
<p class="margin-bottom-3r">
|
||||
Please refer to the whitepaper <a href="https://www.ranchimall.net/ICO/">here</a> for detailed terms.
|
||||
RanchiMall Initial Coin Offering (ICO) abides by the terms we offered in our ICO whitepaper available
|
||||
@ -238,6 +280,12 @@
|
||||
getRef('interns_container').append(frag)
|
||||
}
|
||||
renderAllInterns()
|
||||
|
||||
document.addEventListener('click', e=> {
|
||||
if(e.target.closest('.intern__level')){
|
||||
getRef('intern_level_popup').show()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -503,11 +503,13 @@ const render = {
|
||||
return row;
|
||||
},
|
||||
internCard(obj) {
|
||||
const { extension, internName, floId, project } = obj;
|
||||
const { extension, internName, level, floId, project } = obj;
|
||||
const card = getRef("intern_card_template").content.cloneNode(true).firstElementChild;
|
||||
const investorImage = card.querySelector(".person__image");
|
||||
investorImage.src = `assets/interns/${internName}.${extension}`;
|
||||
investorImage.setAttribute("alt", `${internName} profile picture`);
|
||||
card.querySelector(".intern__level").classList.add(level.toLowerCase())
|
||||
card.querySelector(".intern__level").textContent = level;
|
||||
card.querySelector(".person__name").textContent = internName;
|
||||
card.querySelector(".intern-flo-id").textContent = floId;
|
||||
card.querySelector(".intern__project").textContent = project;
|
||||
@ -708,6 +710,7 @@ document.addEventListener("click", (e) => {
|
||||
hideOutletSwitcher();
|
||||
} else {
|
||||
if (e.target.closest(".outlet-label")) {
|
||||
clearTimeout(mouseOverTimeout);
|
||||
showOutletSwitcher(e.target.closest(".outlet-label"));
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user