From ab2b950aa88f5abe7ff11e7dd0ddeed6b359262a Mon Sep 17 00:00:00 2001 From: AllTrueVision <85555604+AllTrueVision@users.noreply.github.com> Date: Mon, 31 Mar 2025 13:46:26 -0400 Subject: [PATCH 1/2] added html --- index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 index.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..d01f779 --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ + + + + + + Document + + + + + \ No newline at end of file From da4829ba8852115ef9e07b445cff8c73811b3300 Mon Sep 17 00:00:00 2001 From: AllTrueVision <85555604+AllTrueVision@users.noreply.github.com> Date: Mon, 31 Mar 2025 13:55:53 -0400 Subject: [PATCH 2/2] comprehensive simple api 2 repo --- index.html | 17 ++++----- main.js | 33 +++++++++++++++++ style.css | 102 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 144 insertions(+), 8 deletions(-) create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html index d01f779..6f98dbe 100644 --- a/index.html +++ b/index.html @@ -1,11 +1,12 @@ - + - - - - Document - + + + - + - \ No newline at end of file + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..92184f6 --- /dev/null +++ b/main.js @@ -0,0 +1,33 @@ +async function initializeCards() { + try{ + // Get a new deck + const deckResponse = await fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1'); + const deck = await deckResponse.json(); + + // Draw 36 cards + const cardsResponse = await fetch(`https://deckofcardsapi.com/api/deck/${deck.deck_id}/draw/?count=36`); + const cards = await cardsResponse.json(); + + const ul = document.querySelector('ul'); + + // Create card elements + cards.cards.forEach((card, index) => { + const li = document.createElement('li'); + li.className = `sides-${index + 1}`; + + const front = document.createElement('div'); + front.className = 'front'; + front.style.backgroundImage = `url(${card.image})`; + + const back = document.createElement('div'); + back.className = 'back'; + back.style.backgroundImage = 'url(https://deckofcardsapi.com/static/img/back.png)'; + + li.appendChild(front); + li.appendChild(back); + ul.appendChild(li); + }); +} catch (error){console.error('Error loading cards:', error)} + } +// Initialize when page loads +document.addEventListener('DOMContentLoaded', initializeCards); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..48c38c1 --- /dev/null +++ b/style.css @@ -0,0 +1,102 @@ +*{ + box-sizing: border-box; +} + +body { + align-items: center; + display: flex; + height: 100vh; + justify-content: center; + width: 100%; + margin: 0; + background: #1a1a1a; + perspective: 800px; + overflow: hidden; + } + + ul, li { + list-style: none; + } + + ul { + height: 14em; + width: 30em; + position: relative; + transform-style: preserve-3d; + perspective: 1000px; + margin: 5em auto; + } + + li { + position: absolute; + height: 28em; + width: 28em; + left: 175%; + top: 150%; + border-radius: 0.5em; + transform-origin: bottom-center; + transform: + rotate(calc(var(--1) * 15deg - 45deg)) + translateY(-100%) + rotateY(0deg); + } + + .front, .back { + background-size: contain; + background-position: center; + background-repeat: no-repeat; + height: 100%; + width: 100%; + position: absolute; + backface-visibility: hidden; + -webkit-backface-visibility: hidden; + } + + .back { + transform: rotateX(180deg); + } + + @keyframes turn { + from { + transform: rotateX(1turn); + } + to { + transform: rotateX(0turn); + } +} + .sides-1 { animation: turn 10s calc(1 * -300ms) linear infinite; } + .sides-2 { animation: turn 10s calc(2 * -300ms) linear infinite; } + .sides-3 { animation: turn 10s calc(3 * -300ms) linear infinite; } + .sides-4 { animation: turn 10s calc(4 * -300ms) linear infinite; } + .sides-5 { animation: turn 10s calc(5 * -300ms) linear infinite; } + .sides-6 { animation: turn 10s calc(6 * -300ms) linear infinite; } + .sides-7 { animation: turn 10s calc(7 * -300ms) linear infinite; } + .sides-8 { animation: turn 10s calc(8 * -300ms) linear infinite; } + .sides-9 { animation: turn 10s calc(9 * -300ms) linear infinite; } + .sides-10 { animation: turn 10s calc(10 * -300ms) linear infinite; } + .sides-11 { animation: turn 10s calc(11 * -300ms) linear infinite; } + .sides-12 { animation: turn 10s calc(12 * -300ms) linear infinite; } + .sides-13 { animation: turn 10s calc(13 * -300ms) linear infinite; } + .sides-14 { animation: turn 10s calc(14 * -300ms) linear infinite; } + .sides-15 { animation: turn 10s calc(15 * -300ms) linear infinite; } + .sides-16 { animation: turn 10s calc(16 * -300ms) linear infinite; } + .sides-17 { animation: turn 10s calc(17 * -300ms) linear infinite; } + .sides-18 { animation: turn 10s calc(18 * -300ms) linear infinite; } + .sides-19 { animation: turn 10s calc(19 * -300ms) linear infinite; } + .sides-20 { animation: turn 10s calc(20 * -300ms) linear infinite; } + .sides-21 { animation: turn 10s calc(21 * -300ms) linear infinite; } + .sides-22 { animation: turn 10s calc(22 * -300ms) linear infinite; } + .sides-23 { animation: turn 10s calc(23 * -300ms) linear infinite; } + .sides-24 { animation: turn 10s calc(24 * -300ms) linear infinite; } + .sides-25 { animation: turn 10s calc(25 * -300ms) linear infinite; } + .sides-26 { animation: turn 10s calc(26 * -300ms) linear infinite; } + .sides-27 { animation: turn 10s calc(27 * -300ms) linear infinite; } + .sides-28 { animation: turn 10s calc(28 * -300ms) linear infinite; } + .sides-29 { animation: turn 10s calc(29 * -300ms) linear infinite; } + .sides-30 { animation: turn 10s calc(30 * -300ms) linear infinite; } + .sides-31 { animation: turn 10s calc(31 * -300ms) linear infinite; } + .sides-32 { animation: turn 10s calc(32 * -300ms) linear infinite; } + .sides-33 { animation: turn 10s calc(33 * -300ms) linear infinite; } + .sides-34 { animation: turn 10s calc(34 * -300ms) linear infinite; } + .sides-35 { animation: turn 10s calc(35 * -300ms) linear infinite; } + .sides-36 { animation: turn 10s calc(36 * -300ms) linear infinite; } \ No newline at end of file