Raven: Så er der nyt at læse om KONCEPTER OG MINISTERIET FOR MAGI på biblioteket! Småkagerne er klar til de hurtige. En kæmpe tak til vores korrekturlæsere der også har knoklet! (2025-08-30 15:08:00)

Arno: Accio relationer. Kom hid! ^^ (2025-08-30 11:51:00)

Arno Neumann
Linden Hawthorne
Thilde Engelbrecth
Fernanda Noura Shafak
Kono Kelly
Sukanya Wongkaeo

465	aktive brugere
14	online brugere

Forside

Opret Bruger

Regler

Pokaloverrækkelse år 99

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

1246 point

685 point

407 point

240 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

Georgie Miller

Som vinderen af ELEVPOKALEN, har Georgie har gjort et fantastisk arbejde dette år og har indsamlet hele 631 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

05/05/2025 12:38 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">1246 point </div><div class="Glas GlasSlytherin2 plads">685 point </div><div class="Glas GlasGryffindor3 plads">407 point </div><div class="Glas GlasHufflepuff4 plads">240 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/411091.jpeg);"></div>
</div><div class="ElevPokalTekst">
<p class="ElevVinderNavn">
Georgie Miller
</p>

Som vinderen af ELEVPOKALEN, har Georgie har gjort et fantastisk arbejde dette år og har indsamlet hele <b>631 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>

Ingen kommentarer endnu

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 101 | Skoleuge

Uge 7 - Maj

Bliv V.I.W.

Nyheder

Pokaloverrækkelse år 99

Tilføj nyt quick-link

Cookieindstillinger