Show sourcecode

The following files exists in this folder. Click to view.

webser/

comments.php
exercises/
exercises.php
img/
incl/
index-no-include.php
index.php
source.php
style/
viewsource.php

`index.php`

104 lines UTF-8 Windows (CRLF)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104


<?php

include("incl/config.php");

$title = "Webbserv1 :Start";

$pageId = "start";

$pageStyle = '

';

?>

<?php include("incl/header.php"); ?>



<div class="ambient-background" aria-hidden="true">

  <div class="bg-grid"></div>

  <div class="orb orb-one"></div>

  <div class="orb orb-two"></div>

  <div class="orb orb-three"></div>

  <div class="orb orb-four"></div>

</div>



<!-- sidans huvudinnehåll  -->

<div id="content" class="start-page">

  <article class="start-article">

    <section class="hero-panel">

      <div class="hero-copy reveal">

        <p class="eyebrow">Webbserverprogrammering 1</p>

        <h1>Bygg, lär och experimentera med webben.</h1>

        <p>Hej och välkommen till Elton samlingssida i kursen webbserverprogrammering 1. Här finns övningar, reflektioner och små projekt som visar hur HTML, CSS och PHP kan skapa något riktigt coolt och användbart.</p>

        <div class="hero-actions">

          <a href="exercises.php" class="primary-btn reveal reveal-delay-1">Se övningar</a>

          <a href="comments.php" class="secondary-btn reveal reveal-delay-2">Läs reflektioner</a>

        </div>

      </div>



      <figure class="portrait-figure reveal reveal-delay-3">

        <img id="eltonbild1" src="img/eltonbild1.jpg" alt="Elton">

        <figcaption>

          <p>Elton</p>

        </figcaption>

      </figure>

    </section>



    <section class="feature-grid">

      <div class="feature-card reveal reveal-delay-1">

        <span class="card-icon">01</span>

        <h2>HTML & CSS</h2>

        <p>Skapa tydliga, responsiva och vackra sidor med moderna layouter och stilprinciper.</p>

      </div>



      <div class="feature-card reveal reveal-delay-2">

        <span class="card-icon">02</span>

        <h2>PHP</h2>

        <p>Lär dig hur server-side kod kan skapa dynamiska sidor och strukturera innehåll smart.</p>

      </div>



      <div class="feature-card reveal reveal-delay-3">

        <span class="card-icon">03</span>

        <h2>Experiment</h2>

        <p>Utforska, testa och bygg vidare med kod som ger kreativ frihet och lärande i praktiken.</p>

      </div>

    </section>

  </article>

</div>



<script>

  const revealItems = document.querySelectorAll('.reveal');



  const revealObserver = new IntersectionObserver((entries) => {

    entries.forEach((entry) => {

      if (entry.isIntersecting) {

        entry.target.classList.add('is-visible');

      }

    });

  }, {

    threshold: 0.18,

    rootMargin: '0px 0px -8% 0px'

  });



  revealItems.forEach((item) => revealObserver.observe(item));



  const orbs = document.querySelectorAll('.orb');



  function updateOrbEffects() {

    const vh = window.innerHeight;

    const scrollY = window.scrollY;



    orbs.forEach((orb, index) => {

      const rect = orb.getBoundingClientRect();

      const center = rect.top + rect.height / 2;

      const distanceFromCenter = Math.abs(center - (vh / 2));

      const fadeStrength = Math.max(0, 1 - (distanceFromCenter / (vh * 0.9)));

      const alpha = (0.12 + fadeStrength * 0.88).toFixed(3);

      const drift = scrollY * (0.04 + index * 0.015) * (index % 2 === 0 ? 1 : -1);

      const yShift = scrollY * (0.08 + index * 0.02);



      orb.style.opacity = alpha;

      orb.style.transform = `translate3d(${drift}px, ${yShift}px, 0) scale(${1 + fadeStrength * 0.18})`;

      orb.style.filter = `blur(${8 + (1 - fadeStrength) * 14}px)`;

    });

  }



  updateOrbEffects();

  window.addEventListener('scroll', updateOrbEffects, { passive: true });

  window.addEventListener('resize', updateOrbEffects);

</script>



<?php include("incl/footer.php"); ?>