madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madebydanny.uk
html
css
javascript
Added "Made possibale" Section
+137
-5
.DS_Store
.DS_Store
This is a binary file and will not be displayed.
+100
-2
css/index.css
+100
-2
css/index.css
···
793
793
}
794
794
795
795
/* Section headers with icons */
796
-
#projects h2, #tangled-repo h2 {
796
+
#projects h2, #tangled-repo h2, #leaflets h2, #thanks h2 {
797
797
font-size: 1.6em;
798
798
font-weight: 700;
799
799
margin-bottom: 20px;
···
805
805
border-bottom: 2px solid rgba(153, 153, 255, 0.3);
806
806
}
807
807
808
-
#projects h2 i, #tangled-repo h2 i {
808
+
#projects h2 i, #tangled-repo h2 i, #leaflets h2 i, #thanks h2 i {
809
809
color: #9999ff;
810
810
font-size: 0.9em;
811
+
}
812
+
813
+
/* Leaflets RSS Feed Styling */
814
+
#leaflets #rss .leaflet-item,
815
+
#rss .feedItem {
816
+
background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
817
+
border-radius: 12px;
818
+
padding: 20px;
819
+
margin-bottom: 16px;
820
+
border: 1px solid rgba(255, 255, 255, 0.1);
821
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
822
+
position: relative;
823
+
overflow: hidden;
824
+
}
825
+
826
+
#leaflets #rss .leaflet-item::before,
827
+
#rss .feedItem::before {
828
+
content: '';
829
+
position: absolute;
830
+
top: 0;
831
+
left: 0;
832
+
width: 4px;
833
+
height: 100%;
834
+
background: linear-gradient(180deg, #9999ff, #b3b3ff);
835
+
opacity: 0;
836
+
transition: opacity 0.3s ease;
837
+
}
838
+
839
+
#leaflets #rss .leaflet-item:hover,
840
+
#rss .feedItem:hover {
841
+
transform: translateX(8px);
842
+
border-color: rgba(153, 153, 255, 0.4);
843
+
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3));
844
+
box-shadow: 0 8px 24px rgba(153, 153, 255, 0.15);
845
+
}
846
+
847
+
#leaflets #rss .leaflet-item:hover::before,
848
+
#rss .feedItem:hover::before {
849
+
opacity: 1;
850
+
}
851
+
852
+
#leaflets #rss h3,
853
+
#rss .feedItem h3,
854
+
#rss .feedItem .feedTitle {
855
+
margin-top: 0;
856
+
margin-bottom: 12px;
857
+
font-size: 1.3em;
858
+
font-weight: 600;
859
+
color: #ffffff;
860
+
}
861
+
862
+
#leaflets #rss a,
863
+
#rss .feedItem a {
864
+
color: #ffffff;
865
+
text-decoration: none;
866
+
transition: color 0.3s ease;
867
+
display: inline-flex;
868
+
align-items: center;
869
+
gap: 8px;
870
+
}
871
+
872
+
#leaflets #rss a:hover,
873
+
#rss .feedItem a:hover {
874
+
color: #b3b3ff;
875
+
}
876
+
877
+
#leaflets #rss .leaflet-description,
878
+
#rss .feedItem .feedDescription,
879
+
#rss .feedItem p {
880
+
margin: 8px 0;
881
+
color: #d0d0d0;
882
+
line-height: 1.6;
883
+
font-size: 0.95em;
884
+
}
885
+
886
+
#leaflets #rss .leaflet-date,
887
+
#rss .feedItem .feedDate {
888
+
color: #999;
889
+
font-size: 0.9em;
890
+
margin-top: 10px;
891
+
}
892
+
893
+
/* Thanks Section Styling */
894
+
#thanks-content {
895
+
color: #e6e6e6;
896
+
line-height: 1.8;
897
+
font-size: 0.95em;
898
+
}
899
+
900
+
#thanks-content a {
901
+
color: #b3b3ff;
902
+
text-decoration: none;
903
+
transition: color 0.3s ease;
904
+
}
905
+
906
+
#thanks-content a:hover {
907
+
color: #d4d4ff;
908
+
text-decoration: underline;
811
909
}
812
910
813
911
/* Responsive breakpoints */
+9
-2
index.html
+9
-2
index.html
···
91
91
<div id="tangled-repo" class="white-card" style="margin-top: 20px;">
92
92
<p>Loading tangled repository...</p>
93
93
</div>
94
+
<div id="leaflets" class="white-card" style="margin-top: 20px;">
95
+
<h2><i class="fa-solid fa-rss"></i> Latest Leaflets</h2>
96
+
<div id="rss"></div>
97
+
</div>
94
98
<div class="content-section">
95
-
<div id="rss" class="white-card"></div>
96
99
<section id="simple-photo-gallery">
97
100
<h2><i class="fa-solid fa-images"></i> Pined Photos</h2>
98
101
<div class="gallery">
···
115
118
</div>
116
119
</section>
117
120
</div>
121
+
<div id="thanks" class="white-card" style="margin-top: 20px;">
122
+
<h2><i class="fa-solid fa-heart"></i> Made Possible Thanks To</h2>
123
+
<div id="thanks-content">Loading...</div>
124
+
</div>
118
125
<div id="footer" class="white-card"></div>
119
-
<div class="content-section">
126
+
<div class="content-section">
120
127
<iframe src="https://status.madebydanny.uk/badge?theme=dark" width="250" height="30" frameborder="0" scrolling="no" style="color-scheme: normal"></iframe>
121
128
</div>
122
129
<button onclick="topFunction()" id="myBtn" title="Go to top"><i class="fa-solid fa-arrow-up"></i></button>
+28
-1
js/index.js
+28
-1
js/index.js
···
550
550
}
551
551
552
552
// ============================================
553
+
// CUSTOM PDS API - THANKS SECTION
554
+
// ============================================
555
+
556
+
async function fetchThanks() {
557
+
const thanksElement = document.getElementById('thanks-content');
558
+
if (!thanksElement) return;
559
+
560
+
const apiUrl = 'https://mbdio.uk/xrpc/com.atproto.repo.getRecord?repo=did:plc:l37td5yhxl2irrzrgvei4qay&collection=uk.madebydanny.thanks&rkey=3m5orengzks2d';
561
+
562
+
try {
563
+
const response = await fetch(apiUrl);
564
+
if (!response.ok) throw new Error('Failed to fetch thanks content');
565
+
566
+
const data = await response.json();
567
+
if (data.value && data.value.content) {
568
+
thanksElement.innerHTML = data.value.content;
569
+
} else {
570
+
thanksElement.innerHTML = '<p>No thanks content available</p>';
571
+
}
572
+
} catch (error) {
573
+
console.error('Error fetching thanks content:', error);
574
+
thanksElement.innerHTML = '<p>Error loading thanks content</p>';
575
+
}
576
+
}
577
+
578
+
// ============================================
553
579
// INITIALIZATION - EXECUTE ALL FETCH FUNCTIONS
554
580
// ============================================
555
581
···
561
587
fetchFooter();
562
588
fetchProjects();
563
589
fetchCurrentStatus();
564
-
fetchTangledRepo();
590
+
fetchTangledRepo();
591
+
fetchThanks();