Skip to content

Commit

Permalink
Merge pull request #114 from nhsengland/aib/improve-landing-page
Browse files Browse the repository at this point in the history 
Randomise Carousel Projects
  • Loading branch information
@SamHollings
SamHollings authored May 24, 2024
2 parents 5de701a + e7edd92 commit 9de8912
Show file tree
Hide file tree
Showing 2 changed files with 161 additions and 74 deletions.
231 changes: 159 additions & 72 deletions overrides/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,6 +162,9 @@
}
}

.slide {
display: none;
}

.hero-content {
flex: 2;
Expand Down Expand Up @@ -335,107 +338,191 @@ <h1>A showcase of some of our projects!</h1>
<div class="carousel">

<div class="slide one">
<a href="our_work/ai-dictionary">
<img src="./images/ai-dictionary.png" width="80px" />
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span>AI dictionary → </span>
<span></span>
</div>
</a>
</div>

<div class="slide two">
<a href="our_work/ambulance-delay-predictor">
<img src="./images/ambulance-delay-predictor.png" width="80px" />
<div class="card-btn-container">
<span>Ambulance Delay Predictor → </span>
<div class="slide two">
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span></span>
</div>
</a>
</div>

<div class="slide three">
<a href="our_work/ds218_rap_community_of_practice">
<img src="./images/ds218_rap_community_of_practice.png" width="80px" />
<div class="card-btn-container">
<span>RAP → </span>
</div>
</a>
<div class="slide three">
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span></span>
</div>
</a>
</div>

<div class="slide four">
<a href="our_work/bed-allocation">
<img src="./images/bed-allocation.png" width="80px" />
<div class="card-btn-container">
<span>Bed Allocation → </span>
</div>
</a>
<div class="slide four">
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span></span>
</div>
</a>
</div>

<div class="slide five">
<a href="our_work/p22_txtrayalign">
<img src="./images/p22fig1.png" width="80px" />
<div class="card-btn-container">
<span>Txt Ray Align → </span>
</div>
</a>
</div>
<div class="slide five">
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span></span>
</div>
</a>
</div>

<div class="slide six">
<a href="our_work/p32_phmdiabetes">
<img src="./images/p32fig1.png" width="80px" />
<div class="card-btn-container">
<span>Inequalities in Diabetes from PHM Data → </span>
</div>
<div class="slide six">
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span></span>
</div>
</a>
</div>
</div>

<div class="slide seven">
<a href="our_work/parkinsons-detection">
<img src="./images/parkinsons-detection.png" width="80px" />
<div class="card-btn-container">
<span>Parkinson's Detection → </span>
</div>
<div class="slide seven">
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span></span>
</div>
</a>
</div>
</div>

<div class="slide eight">
<a href="our_work/c250_nhscorpus">
<img src="./images/c250fig1.png" width="80px" />
<div class="card-btn-container">
<span>Building an NHS Language Corpus → </span>
</div>
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span></span>
</div>
</a>
</div>
</div>

<div class="slide nine">
<a href="our_work/c338_poud">
<img src="./images/c338fig1.png" width="80px" />
<div class="card-btn-container">
<span>Assessing Privacy of Unstructure Data → </span>
</div>
<div class="slide nine">
<a href="#">
<img src="" width="80px" />
<div class="card-btn-container">
<span></span>
</div>
</a>
</div>
</div>

</div>

</div>

<!-- this code is a starting point for when we decide to make the carousel randomly generate projects to display (if we decide that) -->
<script>
document.addEventListener("DOMContentLoaded", function () {
var sections = document.querySelectorAll('.slide');
var selectedSections = [];

// Randomly select 9 sections
while (selectedSections.length < 9) {
var randomIndex = Math.floor(Math.random() * sections.length);
if (!selectedSections.includes(randomIndex)) {
selectedSections.push(randomIndex);
const project_URLs = ['our_work/p23_stm.md',
'our_work/data-lens.md',
'our_work/linkage.md',
'our_work/p32_phmdiabetes.md',
'our_work/p22_txtrayalign.md',
'our_work/c338_poud.md',
'our_work/bed-allocation.md',
'our_work/ratings-and-reviews.md',
'our_work/c250_nhscorpus.md',
'our_work/ambulance-delay-predictor.md',
'our_work/casestudy-recruitment-shortlisting.md',
'our_work/p31_txtrayalign2.md',
'our_work/nursing-placement-optimisation.md',
'our_work/c339_sas.md',
'our_work/ai-dictionary.md',
'our_work/adrenal-lesions.md',
'our_work/ai-deep-dive.md',
'our_work/renal-health-prediction.md',
'our_work/p12_synthvae.md',
'our_work/casestudy-synthetic-data-pipeline.md',
'our_work/p24_lime.md',
'our_work/ct-alignment.md',
'our_work/c399_privfinger.md',
'our_work/p43_medcat.md',
'our_work/p34_hypergraphs.md',
'our_work/p14_mcr.md',
'our_work/synthetic-data-pipeline.md',
'our_work/a_and_e_forecasting_tool.md',
'our_work/p11_synpathdiabetes.md',
'our_work/nhs-resolution.md',
'our_work/long-stay-baseline.md',
'our_work/parkinsons-detection.md',
'our_work/p42_hypergraphs2.md',
'our_work/long-stay.md',
'our_work/ai-skunkworks.md',
'our_work/c245_synpath.md',
'our_work/p21_synthvae.md',
'our_work/p33_patientsafetylms.md',
'our_work/ds255_privacyfp.md',
'our_work/ds218_rap_community_of_practice.md',
'our_work/open-safely.md']


document.addEventListener("DOMContentLoaded", async function () {
const slides = document.querySelectorAll('.slide');

// Helper function to fetch and parse HTML
async function fetchHTML(url) {
try {
const response = await fetch(url);
const text = await response.text();
const parser = new DOMParser();
return parser.parseFromString(text, 'text/html');
} catch (error) {
console.error('Error fetching HTML:', error);
}
}

// Randomly select 9 unique URLs
const selectedUrls = [];
while (selectedUrls.length < 9) {
const randomIndex = Math.floor(Math.random() * project_URLs.length);
const url = project_URLs[randomIndex];
if (!selectedUrls.includes(url.slice(0,-3)+'/')) {
selectedUrls.push(url.slice(0,-3)+'/');
}
}

console.log('Selected URLs:', selectedUrls);

// Update slides with selected URLs
for (let i = 0; i < selectedUrls.length; i++) {
const url = selectedUrls[i];
const page = await fetchHTML(url);
// const page = page_absolute;
if (page) {
const images = page.querySelectorAll('img');
if (images.length > 2) {
const secondImg = images[2];
slides[i].style.display = 'flex';
const anchor = slides[i].querySelector('a');
anchor.href = url;
const img = anchor.querySelector('img');
img.src = secondImg.src.replace('/images/', '/datascience/images/')
img.alt = secondImg.alt || 'Project Image';
const span = anchor.querySelector('span');
span.textContent = `${page.title} →`;
} else {
slides[i].style.display = 'flex';
const anchor = slides[i].querySelector('a');
anchor.href = url;
const img = anchor.querySelector('img');
img.src = 'images/logo/nhs-blue-on-white.jpg'
img.alt = 'NHS Logo';
const span = anchor.querySelector('span');
span.textContent = `${page.title} →`;
}
}
// Display the selected sections
selectedSections.forEach(function (index) {
sections[index].style.display = 'inline';
});
});
}
});
</script>

{% endblock %} {% block content %}{% endblock %} {% block footer %} {{ super()
Expand Down
4 changes: 2 additions & 2 deletions utils/list-projects.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ def extract_tags_from_file(file_path):
md_files = []
for root, dirs, files in os.walk('docs/our_work'):
for file in files:
if file.endswith('.md'):
md_files.append(file)
if file.endswith('.md') & (file not in ['Publications.md', 'tags.md']):
md_files.append('our_work/'+file)

print(md_files)

0 comments on commit 9de8912

Please sign in to comment.