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
9	online brugere

Forside

Opret Bruger

Regler

Pokaloverrækkelse år 91

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.

GRYFFINDOR

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

2215 point

1700 point

890 point

692 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

Casimir Fischer

Casimir har gjort et fantastisk arbejde dette år og har indsamlet hele 1213 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/10/2023 10:29 Lærerstaben

<!--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">1 point </div><div class="Glas GlasGryffindor2 plads">2 point </div><div class="Glas GlasHufflepuff3 plads">3 point </div><div class="Glas GlasSlytherin4 plads">4 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">2215 point </div><div class="Glas GlasRavenclaw2 plads">1700 point </div><div class="Glas GlasHufflepuff3 plads">890 point </div><div class="Glas GlasSlytherin4 plads">692 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">1 point </div><div class="Glas GlasRavenclaw2 plads">2 point </div><div class="Glas GlasGryffindor3 plads">3 point </div><div class="Glas GlasSlytherin4 plads">4 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/410403.jpg?nocache=1697843870);"></div>
</div><div class="ElevPokalTekst">
<p class="ElevVinderNavn">
Casimir Fischer
</p>

Casimir har gjort et fantastisk arbejde dette år og har indsamlet hele <b>1213 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;
}

.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>

Blaise 23/10/2023 10:30

Raven 23/10/2023 10:44

Ris/Ros til opslaget modtages med kyshånd i mit ugleri :)

Og tillykke til Gryffindor og Casimir

Marlie-june 23/10/2023 12:17

Nice design!
Og godt gået, løver <3

Eliza 23/10/2023 12:17

Tillykke Gryffindor og Casimir! Virkelig flot layout!

Piper 23/10/2023 13:07

ELSKER DET NYE DESIGN 🧡🦁

Loraine 23/10/2023 18:16

Tillykke! Vi slår dem i år, slangerne!

Og flot design!

Naomi 23/10/2023 18:58

Stort tillykke - og så flot layout, Raven. *fan*

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 91

Tilføj nyt quick-link

Cookieindstillinger