UI

school/models.py

@@ -53,3 +53,8 @@ class Notice(models.Model):
     date=models.DateField(auto_now=True)
     by=models.CharField(max_length=20,null=True,default='school')
     message=models.CharField(max_length=500)
+
+class FormData(models.Model):
+    name = models.CharField(max_length=100)
+    email = models.EmailField()
+    message = models.TextField()

school/views.py

@@ -12,6 +12,16 @@ def home_view(request):
         return HttpResponseRedirect('afterlogin')
     return render(request,'school/index.html')
 
+#formdata
+def form_view(request):
+    if request.method == 'POST':
+        form = FormDataForm(request.POST)
+        if form.is_valid():
+            form.save()
+            return redirect('afterlogin')  # Redirect to success page after form submission
+    else:
+        form = FormDataForm()
+    return render(request, 'form_template.html', {'form': form})
 
 
 #for showing signup/login button for teacher(by sumit)

templates/school/aboutus.html

@@ -19,6 +19,41 @@
     .alert {
       margin: 0px;
     }
+
+    .reduced-image {
+      width: 25%; /* Adjust as needed */
+      height: auto;
+      display: block;
+      margin: 0 auto; /* Center the image */
+    }
+
+    h1{
+      color: #484848;
+      font-size: 50px;
+      font-weight: bold;
+      font-family: monospace;
+      letter-spacing: 7px;
+      cursor: pointer
+    }
+    h1 span{
+      transition: .5s linear
+    }
+    h1:hover span:nth-child(1){
+      margin-right: 5px
+    }
+    h1:hover span:nth-child(1):after{
+      content: "'";
+    }
+    h1:hover span:nth-child(2){
+      margin-left: 30px
+    }
+    h1:hover span{
+      color: #238723;
+      text-shadow: 0 0 10px #,
+                   0 0 20px #fff, 
+                   0 0 40px #fff;
+    }
+
   </style>
 
   <title></title>
@@ -32,9 +67,10 @@
     <h3 class='alert alert-success' style="margin-bottom:0px;">About Us !</h3>
   </center>
   <div class="jumbotron" style="margin-bottom: 0px;margin-top: 0px;">
-    <h1 class="display-4">Hello</h1>
-    <p class="lead">A service dedicated to Admin, Student and Teacher. We provide online resources, professional support
-      and guidance to all our students,teacher whenever, and from wherever they have chosen to study.</p>
+    {% comment %} <h1 class="display-4">Hello</h1> {% endcomment %}
+    <h1><span>WE</span>RE<span>POSSIBLE</span></h1>
+    <img src="{% static 'images/food1.gif' %}" alt="Volunteering Image" class='reduced-image'>
+    <p class="lead" color="red">We specialize in connecting high schoolers with rewarding opportunities at local food banks to help them meet their community service hours while developing their social responsibility. Through our platform, students gain valuable experience while making a tangible impact on hunger relief efforts in their neighborhoods. Our mission is to empower young volunteers to become agents of change, creating a brighter future for themselves and those they serve.</p>
     <hr class="my-4">
     <p>Explore our Website.</p>
     <p class="lead">

templates/school/admin_dashboard.html

@@ -12,7 +12,7 @@
       margin-left: 25%;
       margin-right: 25%;
       padding: 20px;
-      background-color: #f44336;
+      background-color: #fff;
       color: white;
     }
 
@@ -34,6 +34,229 @@
     .closebtn:hover {
       color: black;
     }
+
+    h1 {
+      font-size: 5.25vmin;
+      text-align: center;
+      color: white;
+    }
+    p {
+      font-size: max(10pt, 2.5vmin);
+      line-height: 1.4;
+      color: #0e390e;
+      margin-bottom: 1.5rem;
+    }
+
+    .wrap {
+      display: flex;
+      flex-wrap: nowrap;
+      justify-content: space-between;
+      margin: 2rem auto;
+      border: 8px solid;
+      border-image: linear-gradient(
+          -50deg,
+          green,
+          #00b300,
+          forestgreen,
+          green,
+          lightgreen,
+          #00e600,
+          green
+        )
+        1;
+      transition: 0.3s ease-in-out;
+      position: relative;
+      overflow: hidden;
+    }
+    .overlay {
+      position: relative;
+      display: flex;
+      width: 100%;
+      height: 100%;
+      padding: 1rem 0.75rem;
+      background: #186218;
+      transition: 0.4s ease-in-out;
+      z-index: 1;
+    }
+    .overlay-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 15vmin;
+      height: 100%;
+      padding: 0.5rem 0 0 0.5rem;
+      border: 3px solid;
+      border-image: linear-gradient(
+          to bottom,
+          #aea724 5%,
+          forestgreen 35% 65%,
+          #aea724 95%
+        )
+        0 0 0 100%;
+      transition: 0.3s ease-in-out 0.2s;
+      z-index: 1;
+    }
+    .image-content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 60vmin;
+      height: 100%;
+      background-image: url("https://img.freepik.com/free-vector/tiny-volunteers-sharing-canned-food-grocery-products-help-support-assistance-from-people-with-charity-cardboard-box-flat-vector-illustration-voluntary-delivery-humanitarian-aid-concept_74855-22077.jpg?w=2000&t=st=1711741820~exp=1711742420~hmac=55d6e095b6ffb12b8601be7ae9028f645c21e0eb38bf4a6fec0f4bdd5176b496");
+      background-size: cover;
+      transition: 0.3s ease-in-out;
+      /* border: 1px solid green; */
+    }
+
+    .inset {
+      max-width: 50%;
+      margin: 0.25em 1em 1em 0;
+      border-radius: 0.25em;
+      float: left;
+    }
+
+    .dots {
+      position: absolute;
+      bottom: 1rem;
+      right: 2rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-around;
+      align-items: center;
+      width: 55px;
+      height: 4vmin;
+      transition: 0.3s ease-in-out 0.3s;
+    }
+    .dot {
+      width: 14px;
+      height: 14px;
+      background: yellow;
+      border: 1px solid indigo;
+      border-radius: 50%;
+      transition: 0.3s ease-in-out 0.3s;
+    }
+
+    .text {
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 60vmin;
+      height: 100%;
+      padding: 3vmin 4vmin;
+      background: #fff;
+      box-shadow: inset 1px 1px 15px 0 rgba(0 0 0 / 0.4);
+      overflow-y: scroll;
+    }
+
+    .wrap:hover .overlay {
+      transform: translateX(-60vmin);
+    }
+    .wrap:hover .image-content {
+      width: 30vmin;
+    }
+    .wrap:hover .overlay-content {
+      border: none;
+      transition-delay: 0.2s;
+      transform: translateX(60vmin);
+    }
+    .wrap:hover .dots {
+      transform: translateX(1rem);
+    }
+    .wrap:hover .dots .dot {
+      background: white;
+    }
+
+    /* Animations and timing delays */
+    .animate {
+      animation-duration: 0.7s;
+      animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
+      animation-fill-mode: backwards;
+    }
+    /* Pop In */
+    .pop {
+      animation-name: pop;
+    }
+    @keyframes pop {
+      0% {
+        opacity: 0;
+        transform: scale(0.5, 0.5);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1, 1);
+      }
+    }
+
+    /* Slide In */
+    .slide {
+      animation-name: slide;
+    }
+    @keyframes slide {
+      0% {
+        opacity: 0;
+        transform: translate(4em, 0);
+      }
+      100% {
+        opacity: 1;
+        transform: translate(0, 0);
+      }
+    }
+
+    /* Slide Left */
+    .slide-left {
+      animation-name: slide-left;
+    }
+    @keyframes slide-left {
+      0% {
+        opacity: 0;
+        transform: translate(-40px, 0);
+      }
+      100% {
+        opacity: 1;
+        transform: translate(0, 0);
+      }
+    }
+
+    .slide-up {
+      animation-name: slide-up;
+    }
+    @keyframes slide-up {
+      0% {
+        opacity: 0;
+        transform: translateY(3em);
+      }
+      100% {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    .delay-1 {
+      animation-delay: 0.3s;
+    }
+    .delay-2 {
+      animation-delay: 0.6s;
+    }
+    .delay-3 {
+      animation-delay: 0.9s;
+    }
+    .delay-4 {
+      animation-delay: 1.2s;
+    }
+    .delay-5 {
+      animation-delay: 1.5s;
+    }
+    .delay-6 {
+      animation-delay: 1.8s;
+    }
+    .delay-7 {
+      animation-delay: 2.1s;
+    }
+    .delay-8 {
+      animation-delay: 2.4s;
+    }
+
+
   </style>
   <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 
@@ -48,8 +271,29 @@
 </div><br>
 {%for n in notice%}
 <div class="alert">
+
+  {% comment %} <strong>{{n.date}} ||By :{{n.by}} </strong><br> {{n.message}} {% endcomment %}
+
   <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span>
-  <strong>{{n.date}} ||By :{{n.by}} </strong><br> {{n.message}}
+  <div class="wrap animate pop">
+    <div class="overlay">
+      <div class="overlay-content animate slide-left delay-2">
+        <h1 class="animate slide-left pop delay-4">Volunteering event</h1> 
+        {% comment %} the one above needs to have a dynamic title for the volunteering event posted {% endcomment %}
+        <p class="animate slide-left pop delay-5" style="color: white; margin-bottom: 2.5rem;">{{n.date}} || <em>By :{{n.by}}</em></p>
+      </div>
+      <div class="image-content animate slide delay-5"></div>
+      <div class="dots animate">
+        <div class="dot animate slide-up delay-6"></div>
+        <div class="dot animate slide-up delay-7"></div>
+        <div class="dot animate slide-up delay-8"></div>
+      </div>
+    </div>
+    <div class="text">
+      <p><img class="inset" src="https://assets.codepen.io/4787486/oak_1.jpg" alt="" />{{n.message}}</p>
+      <button>Click</button>
+    </div>
+  </div>
 </div>
 {%endfor%}
 

templates/school/admin_notice.html

@@ -70,7 +70,7 @@
           </div>
 
         </div>
-        <button type="submit" class="btnSubmit">Submit</button>
+        <a class="btn btn-primary btn-lg" href="form_template" role="button">Register Here</a>
       </div>
     </div>
   </div>