Valeria: Nogen der er gode til HTLM profiler, som kan hjælpe mig? Har aldrig lavet det før, men synes de er nice! (2025-10-12 11:01:00)

Raven: Spotlyset søger igen, mangler du at svare så tjek dit ugleri, vil du gerne deltage eller er der en du gerne vil have som deltager så send mig en ugle! og tjek Jonathans svar ud i mens (2025-10-08 21:55:00)

Caspoxe Deenmore
Augustus Canmore
Rosemary Aisha Maiden
Philippa Rose Remington
Steele Lancaster
Daisy Elena Leftwich

478	aktive brugere
8	online brugere

Forside

Opret Bruger

Regler

Pokaloverrækkelse år 101

Kære allesammen!

Så runder vi endnu et flot år af, og derfor vil vi traditionen tro, gerne hylde de flittige og se tilbage på de gode minder.

Vi vil gerne sige jer en stor tak for både lektier, deltagelse i konkurrencer og fantastiske emner der er spillet i løbet af året.

RAVENCLAW

Stort tillykke til Ravenclaw der løber med pokalen dette år

1711 point

1012 point

505 point

308 point

Så bliver det spændende! Hvem har egentlig vundet kollegiepokalen tror du? Jamen lad os afsløre det *trommehvirvel*...

...og vinderen af kollegiepokalen er...

(Klik på mig...)

Vinder af Elevpokalen

Ever Green

Som vinderen af ELEVPOKALEN, har Ever har gjort et fantastisk arbejde dette år og har indsamlet hele 953 point!. Kæmpe stort tillykke!

Vi håber på at næste år bliver lige så aktivt, og gerne med endnu flere point og lektier på banen! Held og lykke alle sammen!

Fra hele staben skal I alle have tak for jeres deltagelse!

Skrevet af Raven

23/09/2025 10:50 Generelt

<!--LÆS HER:

Dette er en udkommenteret kommentar. Den er vigtig at lære for at gøre dette opslag nemt at rette. Krokodillenæb, udråbstegn og to bindestreger først, og to bindestreger og omvendt krokodillenæb som slut. Alternativt kan du bare kopiere og sætte ind her fra -->

Kære allesammen!<br>
<br>
Så runder vi endnu et flot år af, og derfor vil vi traditionen tro, gerne hylde de flittige og se tilbage på de gode minder.<br>
<br>
<br>
Vi vil gerne sige jer en stor tak for både lektier, deltagelse i konkurrencer og fantastiske emner der er spillet i løbet af året.<br>
</div>
</div>

<div class="KollegiepokalReveal">

<div class="item item-reveal VinderRavenclaw" id="item-reveal">
<div class="VinderWrapper VinderWrapper-Ravenclaw">
  <div class="Vinder-Bg Vinder-Bg-Ravenclaw">RAVENCLAW</div>
  <div class="Vinder-Fg Vinder-Fg-Ravenclaw">RAVENCLAW</div>
</div>
  <p class="Vinder">Stort tillykke til Ravenclaw der løber med pokalen dette år</p>

<div class="AllePladser">
  <div class="Glas GlasRavenclaw1 plads">1711 point </div><div class="Glas GlasGryffindor2 plads">1012 point </div><div class="Glas GlasHufflepuff3 plads">505 point </div><div class="Glas GlasSlytherin4 plads">308 point </div>
  </div>

</div>

<!-- <div class="item item-reveal VinderGryffindor" id="item-reveal">
<div class="VinderWrapper VinderWrapper-Gryffindor">
  <div class="Vinder-Bg Vinder-Bg-Gryffindor">GRYFFINDOR</div>
  <div class="Vinder-Fg Vinder-Fg-Gryffindor">GRYFFINDOR</div>
</div>
  <p class="Vinder">Stort tillykke til Gryffindor der løber med pokalen dette år</p>

<div class="AllePladser">
  <div class="Glas GlasGryffindor1 plads">1720 point </div><div class="Glas GlasRavenclaw2 plads">1427 point </div><div class="Glas GlasHufflepuff3 plads">1059 point </div><div class="Glas GlasSlytherin4 plads">1041 point </div>
  </div>
  
</div> -->

<!--<div class="item item-reveal VinderHufflepuff" id="item-reveal">
<div class="VinderWrapper VinderWrapper-Hufflepuff">
  <div class="Vinder-Bg Vinder-Bg-Hufflepuff">HUFFLEPUFF</div>
  <div class="Vinder-Fg Vinder-Fg-Hufflepuff">HUFFLEPUFF</div>
</div>
  <p class="Vinder">Stort tillykke til Hufflepuff der løber med pokalen dette år</p>

<div class="AllePladser">
  <div class="Glas GlasHufflepuff1 plads">1059 point </div><div class="Glas GlasRavenclaw2 plads">887 point </div><div class="Glas GlasGryffindor3 plads">740 point </div><div class="Glas GlasSlytherin4 plads">692 point </div>
  </div>

</div>  -->

<!--  <div class="item item-reveal VinderSlytherin" id="item-reveal">
<div class="VinderWrapper VinderWrapper-Slytherin">
  <div class="Vinder-Bg Vinder-Bg-Slytherin">SLYTHERIN</div>
  <div class="Vinder-Fg Vinder-Fg-Slytherin">SLYTHERIN</div>
</div>
  <p class="Vinder">Stort tillykke til Slytherin der løber med pokalen dette år</p>

<div class="AllePladser">
  <div class="Glas GlasSlytherin1 plads">1 point </div><div class="Glas GlasGryffindor2 plads">2 point </div><div class="Glas GlasHufflepuff3 plads">3 point </div><div class="Glas GlasRavenclaw4 plads">4 point </div>
  </div>

</div>

<div class="item Magisk-klik-boks" id="Item">
    <div class="TargetText"><p>Så bliver det spændende! Hvem har egentlig vundet kollegiepokalen tror du? Jamen lad os afsløre det *trommehvirvel*...</p><p style="font-size:30px; font-weight:bold;">...og vinderen af kollegiepokalen er...</p>
  <p style="text-align:center;">(Klik på mig...)</p></div>
</div>

<img src="https://static.vecteezy.com/system/resources/previews/010/787/933/non_2x/flower-illustration-on-transparent-background-free-png.png" style="width:500px; margin:auto;" />

Vinder af Elevpokalen</p>
<div class="ElevpokalWrap">

<div class="ElevPokalenVinder">
<div src="" class="ElevPokalVinder" style="background-image:url(https://hogwartsschool.dk/img/profile/412107.jpeg?nocache=1758167533);"></div>
</div><div class="ElevPokalTekst">
<p class="ElevVinderNavn">
Ever Green
</p>

Som vinderen af ELEVPOKALEN, har Ever har gjort et fantastisk arbejde dette år og har indsamlet hele <b>953 point!</b>. Kæmpe stort tillykke!<br>
<br>
Vi håber på at næste år bliver lige så aktivt, og gerne med endnu flere point og lektier på banen! Held og lykke alle sammen!

</div><img src="https://i.imgur.com/ti6kOqT.png" style="height:212px; float:left; margin-left:25px;" /></div>
<div class="PokalAfslutning">
Fra hele staben skal I alle have tak for jeres deltagelse!
</div>

</div>
</div>

</div>

<style>

/*POINT GLAS BILLEDER*/
 /*Pointglas vinder (1)*/
 .GlasRavenclaw1 {background-image: url(https://imgur.com/YKEXgZx.png);}
 .GlasGryffindor1 {background-image: url(https://imgur.com/pZnFgD4.png);}
 .GlasHufflepuff1 {background-image: url(https://imgur.com/qsX8Mm2.png);}
 .GlasSlytherin1 {background-image: url(https://imgur.com/MqvcSY7.png);}

/*Pointglas 2. plads (2)*/
 .GlasRavenclaw2 {background-image: url(https://imgur.com/EiCqBRh.png);}
 .GlasGryffindor2 {background-image: url(https://imgur.com/9mUiqF1.png);}
 .GlasHufflepuff2 {background-image: url(https://imgur.com/Y4u0Vl4.png);}
 .GlasSlytherin2 {background-image: url(https://imgur.com/kjT1cNa.png);}

/*Pointglas 3. plads*/
 .GlasRavenclaw3 {background-image: url(https://imgur.com/2bTkfQd.png);}
 .GlasGryffindor3 {background-image: url(https://imgur.com/eOoR9df.png);}
 .GlasHufflepuff3 {background-image: url(https://imgur.com/68fyvP3.png);}
 .GlasSlytherin3 {background-image: url(https://imgur.com/QiG4jfV.png);}

/*Pointglas 4. plads*/
  .GlasRavenclaw4 {background-image: url(https://imgur.com/rghGlaI.png);}
  .GlasGryffindor4 {background-image: url(https://imgur.com/CBUmFk2.png);}
  .GlasHufflepuff4 {background-image: url(https://imgur.com/8rQFSQm.png);}
  .GlasSlytherin4 {background-image: url(https://imgur.com/FKzyZC0.png);}

/*Vinder tekst*/
.VinderRavenclaw .Vinder, .VinderGryffindor .Vinder, .VinderHufflepuff .Vinder, .VinderSlytherin .Vinder{
  color:#000;
  Margin:auto;
  font-size:20px;
  font-weight:bold;
  
}
/*RAVENCLAW OPSÆTNING*/
.VinderRavenclaw{
  
}
.VinderWrapper-Ravenclaw{
    background-image: url(https://imgur.com/ZoDicna.png);
}

div.Vinder-Bg-Ravenclaw {
  background-image: repeating-linear-gradient( 105deg, 
    #e0ac64, #7c3c12, #e0ac64);
}

div.Vinder-Fg-Ravenclaw {
  background-image: repeating-linear-gradient( 5deg,  
    #e0ac64, #7c3c12, #e0ac64);
  color: #0e1a33;
}

/*GRYFFINDOR OPSÆTNING*/
.VinderGryffindor{
  
}

.VinderWrapper-Gryffindor {
    background-image: url(https://i.pinimg.com/originals/6a/b7/9d/6ab79deb585aba8c842189b06c2a8b14.gif);
  }

div.Vinder-Bg-Gryffindor {
  background-image: repeating-linear-gradient( 105deg, 
    #c8b87f, #79643a, #d8cf99);
}

div.Vinder-Fg-Gryffindor{
  background-image: repeating-linear-gradient( 5deg,  
    #c8b87f, #79643a, #d8cf99);
  color: #450909;
}

/*HUFFLEPUFF OPSÆTNING*/

.VinderHufflepuff{
  
}
.VinderWrapper-Hufflepuff {
  background-image: url(https://i.imgur.com/sWBfSBj.gif);
}

div.Vinder-Bg-Hufflepuff{
  background-image: repeating-linear-gradient( 105deg, 
   #e9d685, #d2a754, #e9d685);
}

div.Vinder-Fg-Hufflepuff{
  background-image: repeating-linear-gradient( 5deg,  
    #e9d685, #d2a754, #e9d685);
  color: #1b1c1e;

}

/*SLYTHERIN OPSÆTNING*/

.VinderSlytherin{
  
}

.VinderWrapper-Slytherin {
    background-image: url(https://pa1.aminoapps.com/6355/7b0afeb7d6357b082630daac26c57f1e8b3e4072_hq.gif);
  }

div.Vinder-Bg-Slytherin {
  background-image: repeating-linear-gradient( 105deg, 
    #d4d4d4, #706864, #d4d4d4);
}

div.Vinder-Fg-Slytherin{
  background-image: repeating-linear-gradient( 5deg,  
    #d4d4d4, #706864, #d4d4d4);
    color: #09351f;
}

/*Resterende pladser*/

.AllePladser{
  display:flex;
  margin-top: 40px;
}

.plads{
  padding-top: 15px;
  text-align: center;
}
  
  .Glas{
    height: 220px;
    background-repeat: no-repeat;
    margin-left: 10px;
    margin-top: 0px;
    width: 131px;
    background-size: contain;
    display: grid;
    align-content: end;
    
  }

.ElevPokalHeader{
   margin:auto;
   font-size:xxx-large;
   
 }
 
 .ElevPokalenVinder{
 float:left; 
 width:185px;
 display:flex;
 }
 
 .ElevPokalTekst{
   float:left;
   width:338px;
    }
  
 .ElevVinderNavn{
   Text-transform:uppercase;
   font-weight: bold;
   font-size:xx-large;
   margin-top:5px;
   text-align:center;
   
 }
 .PokalAfslutning{
   text-align:center;
   margin: 25px 0px 25px 0px;
 }

.ElevPokalVinder { 
   height:200px; 
   width:150px; 
   background-size: cover;
   border: 5px solid #d3ae1e;
    border-image: url(https://static.vecteezy.com/system/resources/previews/002/960/482/original/of-gold-gradient-gold-gradient-background-texture-metallic-vector.jpg)5 10;
 }

.KollegiePokalOpslag-Start{
    width: 740px;
    margin: auto;
    background-color: #c9b090a6;
    background-image: url(https://i.imgur.com/3OuI1Rl.png);
    padding-top: 20px;
    padding-bottom: 20px;
    border: 1px solid #000;
    background-blend-mode: overlay;
   border-radius: 5px;
   font-family: sans-serif;
       font-size: 16px;
}

.KollegiePokalOpslag-Baggrund{
  background-color:#c9b090cc;
  width:700px;
  margin:auto;
  border:1px solid #000;
  border-radius: 5px;
}

.KollegiePokalOpslag-Header, .KollegiepokalReveal{
     place-content: center;
    display: grid;
  
}

.OpslagText{
      padding: 20px;
    text-align: center;

}

.magisk-boks {
  position: absolute;
  pointer-events: none;
}

.magisk-boks canvas {
    position: absolute;
    left: 0;
    top: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
    opacity: 1;
    transform:
      rotate(0deg) translate(0px, 0px) rotate(0deg);
  
}

@keyframes debug-pulse {
  0% { filter: none; }
  95% { filter: none; }
  95% { filter: drop-shadow(0 1px 0 rgba(255,0,0,1)); }
  100% { filter: drop-shadow(0 1px 0 rgba(255,0,0,1)); }
}

/* == Normal styling below == */

.item {
  margin-bottom: 1em;
  padding: 1em;
  border-radius: 5px;
  place-content: center;
  display: grid;

}

.item-reveal{
  display:none;

}

.Magisk-klik-boks{
  height: 250px;
  width:600px;
  display: flex;
	cursor: pointer;
	box-shadow: inset 0px 3px 5px rgba(255,255,255,0.5), 0px 0px 10px rgba(0,0,0,0.15);
background: linear-gradient(45deg, rgb(255 237 213 / 60%) 5%, rgb(228 197 154 / 60%) 6%, rgb(228 197 154 / 60%) 9%, rgba(255 237 213 / 60%) 10%, rgba(228 197 154 / 60%) 17%, rgb(255 237 213 / 60%) 19%, rgb(228 197 154 / 60%) 21%);
	background-size: 350%;
	background-position: right;
	transition: 1s;
  border:1px solid #000;
  margin-left: 7px;

}

.Magisk-klik-boks:hover, .Magisk-klik-boks:focus {
    background: linear-gradient(45deg, rgb(255 255 255) 5%, rgb(255 255 255) 6%, rgb(225 225 225) 9%, rgb(235 235 235) 10%, rgb(255 255 255) 17%, rgb(255 255 255) 19%, rgb(233 233 233) 21%);
    background-size: 250%;

}

.TargetText{
text-align:center;
margin-top: 30px;
  
}

.VinderWrapper {
  display: grid;
  grid-template-areas: 'overlap';
  place-content: center;
  height: 230px;
  width: 568px;
  background-size: cover;
  background-position-y: center;

}

.VinderWrapper div {
  background-clip: text;  
  -webkit-background-clip: text;
  font-weight: 900;
  font-size: xxx-large;
  grid-area: overlap;
  letter-spacing: 1px;
  -webkit-text-stroke: 4px transparent;

}

div.Vinder-Bg {
    filter: drop-shadow(5px 15px 15px black);
  transform: scaleY(1.05);
  transform-origin: top;
    color: transparent;
}

div.Vinder-Fg {
 transform: scale(1); 
  
}

</style>
<script src="
https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js
"></script>

const DEBUG = false;
const REPETITION_COUNT = 2; // number of times each pixel is assigned to a canvas
const NUM_FRAMES = 128;

/**
 * Generates the individual subsets of pixels that are animated to create the effect
 * @param {HTMLCanvasElement} ctx
 * @param {number} count The higher the frame count, the less grouped the pixels will look - Google use 32, but for our elms we use 128 since we have images near the edges
 * @return {HTMLCanvasElement[]} Each canvas contains a subset of the original pixels
 */
function generateFrames($canvas, count = 32) {
  const { width, height } = $canvas;
  const ctx = $canvas.getContext("2d");
  const originalData = ctx.getImageData(0, 0, width, height);
  const imageDatas = [...Array(count)].map(
    (_,i) => ctx.createImageData(width, height)
  );
  
  // assign the pixels to a canvas
  // each pixel is assigned to 2 canvas', based on its x-position
  for (let x = 0; x < width; ++x) {
    for (let y = 0; y < height; ++y) {
      for (let i = 0; i < REPETITION_COUNT; ++i) {
        const dataIndex = Math.floor(
          count * (Math.random() + 2 * x / width) / 3
        );
        const pixelIndex = (y * width + x) * 4;
        // copy the pixel over from the original image
        for (let offset = 0; offset < 4; ++offset) {
          imageDatas[dataIndex].data[pixelIndex + offset]
            = originalData.data[pixelIndex + offset];
        }
      }
    }
  }
  
  // turn image datas into canvas'
  return imageDatas.map(data => {
    const $c = $canvas.cloneNode(true);
    $c.getContext("2d").putImageData(data, 0, 0);
    return $c;
  });
}

/**
 * Inserts a new element over an old one, hiding the old one
 */
function replaceElementVisually($old, $new) {
  const $parent = $old.offsetParent;
  $new.style.top = `${$old.offsetTop}px`;
  $new.style.left = `${$old.offsetLeft}px`;
  $new.style.width = `${$old.offsetWidth}px`;
  $new.style.height = `${$old.offsetHeight}px`;
  $parent.appendChild($new);
  $old.style.visibility = "hidden";
  document.getElementById("item-reveal").style.display = "inherit"
  document.getElementById("Item").style.display = "none"
  
}

/**
 * Disintegrates an element
 * @param {HTMLElement} $elm
 */
function disintegrate($elm) {
  html2canvas($elm).then($canvas => {    
    // create the container we'll use to replace the element with
    const $container = document.createElement("div");
    $container.classList.add("magisk-boks");
    
    // setup the frames for animation
    const $frames = generateFrames($canvas, NUM_FRAMES);
    $frames.forEach(($frame, i) => {
      $frame.style.transitionDelay = `${1.35 * i / $frames.length}s`;
      $container.appendChild($frame);
    });
    
    // then insert them into the DOM over the element
    replaceElementVisually($elm, $container);
    
    // then animate them
    $container.offsetLeft; // forces reflow, so CSS we apply below does transition
    if (!DEBUG) {
      // set the values the frame should animate to
      // note that this is done after reflow so the transitions trigger
      $frames.forEach($frame => {
        const randomRadian = 2 * Math.PI * (Math.random() - 0.5);
        $frame.style.transform = 
          `rotate(${15 * (Math.random() - 0.5)}deg) translate(${60 * Math.cos(randomRadian)}px, ${30 * Math.sin(randomRadian)}px)
rotate(${15 * (Math.random() - 0.5)}deg)`;
			  $frame.style.opacity = 0;
      });
    } else {
      $frames.forEach($frame => {
        $frame.style.animation = `debug-pulse 1s ease ${$frame.style.transitionDelay} infinite alternate`;
      });
    }
  });
}

/** === Below is just to bind the module and the DOM == */
[...document.querySelectorAll(".Magisk-klik-boks")].forEach($elm => {
  $elm.addEventListener("click", () => {
    if ($elm.disintegrated) { return; }
    $elm.disintegrated = true;
    disintegrate($elm);
  });
});

</script>

Ever 23/09/2025 19:49

❤️ TAK ❤️

Serenity 24/09/2025 21:50

Wauw! Så mange point!

Jonathan 24/09/2025 23:46

Det er helt vanvittigt, Ever. Så flot og absolut fortjent. Tillykke!

Du skal være logget ind for at kunne skrive en kommentar.

© 2008 - 2025 hogwartsschool.dk | Saga Arcana | Tristan@hogwartsschool.dk
Billeder, indhold & karakterer fra Harry Potter Universet © Warner Brothers, J.K. Rowling, og/eller deres respektive ejere.

Har du feedback, idéer eller forslag til siden? Klik her for komme til Canny!

Vis ændringslog

Skift cookie-indstillinger

Årgang 102 | Skoleuge

Uge 4 - Januar

Bliv V.I.W.

Nyheder

Pokaloverrækkelse år 101

Tilføj nyt quick-link

Cookieindstillinger